Question

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

这是html nav和jQuery（仅适用于test.html网址，用于测试）：

$(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调用此functin onload。例如，test.html将使用此代码： -

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

虽然index.html将具有： -

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

加载html后，将加载特定的html

Answer 3

所以你可以做的是你可以在URL查询字符串中添加页面链接，如：

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

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

通过这种方式，您将获得类似pageinfo=test.html的查询字符串，并且在成功解析查询字符串后，您将信息转换为{pageinfo:test.html}。

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

Answer 4

你真的需要在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 5

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

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

点击后激活链接

5 个答案: