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

有几种方法。将信息存储在public SecurityConfig ( KeycloakClientRequestFactory keycloakClientRequestFactory ) { this.keycloakClientRequestFactory = keycloakClientRequestFactory ; // to use principal and authentication together with @ async SecurityContextHolder.setStrategyName ( SecurityContextHolder.MODE_INHERITABLETHREADLOCAL ) ; }或Cookie中，或通过哈希将其附加到网址。

这是哈希方法。点击后，我们会将点击的localStorage的索引附加到哈希值，例如li。

my_page.html#3

然后，在DOM就绪时，我们检查哈希，看看是否需要突出显示之前选择的哈希值。

这假设哈希不用于页面中的内部链接。如果是，$(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'); });方法（使用相同的原则，但存储在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>

页面加载后添加活动类

2 个答案: