javascript - 页面处于活动状态时更改类

Question

更改页面时如何设置 .html 页面处于活动状态？这是更改导航栏中的活动选项卡所必需的。我应该将该类添加.current_page_item到导航的活动 li 中。

我已经搜索了一下，但我找不到合适的答案。

Answer 1

这就是 jquery 所需要的

   <script>
   $(document).ready(function(){

       var links = $('nav').children();
       $.each(links, function(key, value){
          if(value.href == document.URL){
           $(this).addClass('current_page_item');
          }
       });
   </script>
    <nav>
        <a href="/link1">link-1</a>
        <a href="/link2">link-2</a>
        <a href="/link3">link-3</a>
        <a href="/link4">link-4</a>
        <a href="index.html">link-5</a>
    </nav>

链接 5 将获得活动类，因为它与当前 url 相同

---

结果

<nav>
    <a href="/link1">link-1</a>
    <a href="/link2">link-2</a>
    <a href="/link3">link-3</a>
    <a href="/link4">link-4</a>
    <a class="current_page_item" href="index.html">link-5</a>
</nav>

---