页面加载后添加活动 class

Question

我一直在为 wordpress 网站开发自定义菜单。这就是为什么我不能对活动菜单项使用标准的 worpress 选择器。我想在活动link中添加一个活动class。这是我的 html:

<div class="nav">
<ul id="menu">
 <li><a href="/item1">item1</a></li>
 <li><a href="/item2">item2</a></li>
 <li><a href="/item3">item3</a></li>
</ul>

这是我的 jQuery:

 $(document).ready(function() {
        $('div.nav ul#menu li a').on('click', function(event) {
            $(this).addClass('active');
        });
    });

一切正常，它添加了 class，但随后页面重新加载并删除了 class。有没有办法在刷新页面时将 class 添加到活动元素？提前致谢！

Answer 1

几种方式。将信息存储在 localStorage 或 cookie 中，或通过哈希将其附加到 URL。

这是哈希方法。单击时，我们将单击的 li 的索引附加到哈希，例如my_page.html#3.

$(function() {

    //grab menu and listen for clicks...
    var menu = $('div.nav ul#menu');
    menu.on('click', 'li a', function() {

        //...highlight, and log parent LI's index in URL hash
        $(this).addClass('active');
        location.hash = $(this).closest('li').index();
    });

    //onload, auto-highlight a previously-selected link? Trigger a click on it if so.
    var active_onload = location.hash.replace(/^#/, '');
    if (active_onload) menu.find('li:nth-child('+active_onload+') a').trigger('click');
});

然后，在 DOM 准备就绪时，我们检查散列以查看是否需要突出显示之前选择的那个。

这假定散列不用于页面中的内部链接。如果是，localStorage 方法（使用相同的原则，但存储在 localStorage 而不是 URL 哈希中）会更好。

Answer 2

试试这个，

<div class="nav">
    <ul id="menu">
        <li><a href="/item1" class="active">item1</a></li>
        <li><a href="/item2">item2</a></li>
        <li><a href="/item3">item3</a></li>
    </ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
document.onreadystatechange = function(){
    var selected_parent;
    if(document.readyState === 'interactive'){
        selected_parent = $('#menu').children().find('a').filter('.active').parent('li').index();
        jQuery.data( document.body, "selected_parent", selected_parent);       
    }
    if(document.readyState === 'complete'){ 
        var selected_parent = jQuery.data( document.body, "selected_parent" );
        $('#menu').children('li:eq('+selected_parent+')').children('a').addClass('active');
    }
}
</script>

页面加载后添加活动 class

Add active class after page load

wordpress

jquery

nav