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

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 是可用的，它允许使用干净、漂亮的 URL。为什么不使用它？使用片段标识符已经过时，对于那些碰巧禁用了 JS 的人来说并不好。

如果你真的想使用历史 API 并且担心browser support，你可以使用history.js，这使得即使在不支持它的浏览器上也可以使用历史 API。有关详细信息，请参阅存储库。

Answer 2

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