单击后的活动链接[重复]

Question

我找不到向导航栏的“a”元素添加类的方法。

这是 html nav 和 jQuery（仅适用于 test.html url，进行测试）：

$(document).ready(function() {
  $("a").click(function() {
    var actRef = $(this).attr("href");
    if (actRef === "test.html") {
      $("a[href='test.html']").addClass("active");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="index.html">Inicio</a>
    </li>
    <li><a href="test.html">Test</a>
    </li>
    <li><a href="#">Item</a>
    </li>
    <li><a href="test2.html"> test2</a>
    </li>
  </ul>
</nav>

这不起作用，它只是没有做任何事情，但是如果我将 .click 更改为 .hover 则可以正常添加类但不会转到链接，因此页面的信息不会改变。
我也试过这个：How to change active class while click to another link in bootstrap use jquery?，但由于e.preventDefault();，两者都不起作用...

如果我取出 preventDefault 它不会添加类但它会转发到链接...

PD：目的是让用户知道他实际在哪个选项卡上，具体取决于他单击的菜单链接。

Answer 1

为什么不使用anchors:active状态：

a:active {
     /* your .active styles */
}

Answer 2

您的代码不起作用，因为您尝试使用 javascript 在某些链接上设置类，然后同时导航。所以事情是您正在更改链接类的部分实际上正在工作，但是您无法看到它，因为导航 html 将被重新加载。

为了解决这个问题，你需要在你的常用html中编写一个更新链接类的常用函数。但是，请在 onload 事件时从正在加载的 html 中调用该函数，而不是在单击时调用。

您常用的 js 或 html 将具有功能：-

highlightlink(linkid){
   $("a[href=' + linkid +']").addClass("active");
}

每个 html 都会用各自的 htmlname 调用这个函数 onload。 例如 test.html 将帽子这个代码：-

$(document).ready( function (){
  highlightlink('test.html')
});
});

虽然 index.html 会有：-

 $(document).ready( function (){
  highlightlink('index.html')
});
});

一旦你的 html 被加载，那个特定的 html 就会被加载

Answer 3

你真的需要给 html 元素添加一个类吗？如果是关于样式，我认为可以使用简单的:active 伪选择器来解决您的样式问题。请参见下面的示例：

li:active {
  background-color: #f99;
}

li a:active {
  color: #fff;
}

<nav>
  <ul>
    <li><a href="index.html">Inicio</a>
    </li>
    <li><a href="test.html">Test</a>
    </li>
    <li><a href="#">Item</a>
    </li>
    <li><a href="test2.html"> test2</a>
    </li>
  </ul>
</nav>

Answer 4

因此，您可以在 URL 查询字符串中添加页面链接，例如：

www.example.com/test.html?pageinfo=test.html

现在页面加载成功后，您可以从查询字符串中检索页面信息，然后您可以将 active 类添加到锚标记。

这样你会得到像pageinfo=test.html这样的查询字符串，在成功解析查询字符串后，你会将信息转换为{pageinfo:test.html}。

使用它可以将样式/类添加到锚标记。

Answer 5

感谢@Panther，这比我想的要容易：

$(document).ready( function(){
var location = window.location.pathname;
location = location.replace("/", "");
$("a[href='"+location+"']").addClass("active");
});