页面加载后添加活动类

Question

我一直在wordpress网站上的自定义菜单上工作。这就是为什么我不能将标准worpress选择器用于活动菜单项。我想在活动链接中添加一个活动类。这是我的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');
        });
    });

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

Answer 1

试试这个，

<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>

Answer 2

几种方式。将信息存储在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哈希）会更好。