Question

我在单击内部链接时尝试将类添加到 li 元素，并导航到该网址，但是在加载页面后该类会消失。那么如何在页面加载后添加类？

<ul>
<li class="tab"><a href="./my_page.html" class="li-trigger">My Page</a></li>
<li class="tab"><a href="./some_page.html">Some Page</a></li>
<li class="tab active"><a href="./some_page2.html">Another Page</a></li>
</ul>


<script type="text/javascript">
    jQuery(document).ready(function(){  
        jQuery('.li-trigger').click(function (event){
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
        });
    }); 
</script>

Answer 1

您需要在页面加载时执行此操作，而不是在单击处理程序中执行此操作。迭代链接并将href与当前页面网址进行比较

$(function(){
  var pageUrl = location.href;
  $('.tab a').each(function(){
     $(this).parent().toggleClass('active', this.href === pageUrl);
  });
})

Answer 2

的jQuery

$(document).ready(function(){
  var path = window.location.pathname;
  $('.li-trigger[href="'+path+'"]').parent('li').addClass('active').siblings().removeClass('active');
});

这会找到.li-trigger的href并将相应的活动类添加到

Answer 3

您的网页不记得事情。但是，您可以使用localStorage创建一个内存，用户单击该按钮。

＆＃13;

jQuery(document).ready(function(){  
        
        jQuery('.li-trigger').click(function (event){
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
            localStorage.setItem('clicked', 'yes');
        });

        if(localStorage.getItem('clicked')) {
          jQuery('.li-trigger').click();
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="tab"><a href="./my_page.html" class="li-trigger">My Page</a></li>
<li class="tab"><a href="./some_page.html" class="li-trigger">Some Page</a></li>
<li class="tab active"><a href="./some_page2.html" class="li-trigger">Another Page</a></li>
</ul>

＆＃13;

（代码不适用于stacksnippets，尝试实时制作）

单击jquery <li>导航到url并在之后添加类

3 个答案: