Question

我想突出显示活动（已打开）链接。链接打开时，必须始终保持此颜色。不仅在鼠标点击或悬停。

以下是我试过的JS方式：

<script type="text/javascript">
    $(document).ready(function(){
     $("a.nav1").click(function () {
      $(".active").removeClass("active");
        $(this).addClass("active");
      });
    });
</script>

html链接：

 <div id="navigation">              
          <ul>
          <li><a class="nav1" data-tab="#home" id="link-home"href="#home">Home</a></li>
          <li><a class="nav1" data-tab="#football" id="link-football" href="#football">Football</a></li>
          <li><a class="nav1" data-tab="#hockey" id="link-hockey"href="#hockey">Hockey</a
</li>
          </ul>
     </div>

它工作但问题是刷新和后退按钮。它不会将此颜色更改为上一个链接。使用其他JS方法，我遇到了同样的问题。

只有使用css才行不通。例如：

  <div id="navigation">             
              <ul>
              <li><a class="nav1" data-tab="#home" id="link-home"href="#home">Home</a></li>
              <li><a class="nav1" data-tab="#football" id="link-football" href="#football">Football</a></li>
              <li><a class="nav1" data-tab="#hockey" id="link-hockey"href="#hockey">Hockey</a
    </li>
              </ul>
         </div>

和CSS

#home .nav1 {
    color: #000;
    background-image:url(farba3.png);
 }
#football .nav1 {
    color: #000;
    background-image:url(farba3.png);
 }
#hockey .nav1 {
    color: #000;
    background-image:url(farba3.png);
 }

Answer 1

您需要侦听哈希更改事件（window.onhashchange），并相应地更改活动链接。

以下是一个例子：

function locationHashChanged() {
    $('.nav1').removeClass('active'); // remove the active class from all elements
    $('.nav1[href="' + location.hash + '"]').addClass('active'); // add the active class to the element whose href equals the new fragment identifier ("hashtag")
}

window.onhashchange = locationHashChanged; // listen for hash change event
locationHashChanged(); // add the active class to the appropriate link on initial page load

然后，在CSS中，您将为具有.active类的列表项添加规则。

想试试吗？ There you go.

请注意，history API可用，并允许干净，漂亮的网址。为什么不用它？使用片段标识符已经过时，对于那些碰巧禁用JS的人来说并不好。

如果您确实想要使用历史记录API并且担心browser support，则可以使用history.js，这使得即使使用不支持历史记录API的浏览器也可以使用历史记录API。有关详细信息，请参阅存储库。

Answer 2

尝试使用cookies或localStorage，您可以在点击时编写链接并在页面加载时阅读。有几个jQuery插件，如Storage API。

突出显示活动（已打开）链接

2 个答案: