Question

我已使用此Jquery在动态创建的Wordpress导航菜单中设置了一个活动类：

$(document).ready(function () {
$('.left-nav ul > li').click(function (e) {
    e.preventDefault();
    $('.left-nav ul > li').removeClass('active');
    $(this).addClass('active');
});
});

CSS：

.left-nav ul li a {
  color:#4D9120;
  display:block;
}
.left-nav ul li:hover a {
  color:#fff;
}
.left-nav ul li:hover {
  background:#4D9120;
}
.left-nav .active{
    background-color:#FF0000 !important;
}
.left-nav .active a{
    color:#fff !important;
}

HTML / PHP

<ul>
<?php wp_nav_menu(array('theme_location'=>'sidemenu','container'=>'','menu_id' => '','fallback_cb'=> false)); ?> 

</ul>

这是动态生成的HTML最终输出：

<div class="col-xs-3 left-nav">
            <ul>
                <li><a href="#">Tutoring</a></li>
                <li><a href="#">Consultancy</a></li>
                <li><a href="#">Summer Camp/School</a></li>
                <li><a href="#">University Applications</a></li>
                <li><a href="#">Job Placements & Intenships</a></li>
            </ul>

        </div>

在点击任何菜单链接时应用活动课程，但不加载页面。但是当我删除了e.preventDefault();页面加载但是活动类不再应用了。

我本来喜欢粘贴网站网址，但我目前正在本地服务器上工作。任何帮助将不胜感激。

Answer 1

current-menu-item类应自动wp_nav_menu添加到活动菜单项。摆脱Javascript，并尝试将其添加到您的CSS：

.left-nav ul li.current-menu-item { background-color:#FF0000 !important; }
.left-nav ul li.current-menu-item a { color:#fff !important; }

请参阅文档here。

Answer 2

这里发生了什么 -

当你使用＆＃34; e.preventDefault（）;＆＃34;对于链接的点击事件，您实际上是阻止它执行其默认任务 - ＆＃34;在点击＆＃34;时加载链接，但是javascript被执行，因此您的＆＃34;活动类＆＃34;应用于点击但链接不起作用且页面无法加载。
删除＆＃34; e.preventDefault（）;该链接确实有效，它会加载链接到的页面，但活动类不会被应用，因为它完全是一个新页面，它与前一页上的javascript无关，而且它已被加载了＃34;。

希望这有助于解决您的问题..

附加在<li>上的活动类，Jquery在页面加载时不起作用

2 个答案: