Jquery 在 LI 导航上删除和添加“事件”类可与 PreventDefault 配合使用,但不再链接
Jquery 删除添加事件类到 li 节点不起作用
我知道删除事件类并将其添加到 li 中以突出显示当前页面的导航项应该是非常基本的,但我一直无法让它工作。
我发现我必须使用 e.preventDefault() 才能使其工作,但是当我这样做时,链接不起作用,但突出显示的导航项可以工作。如果我删除 PreventDefault() 那么它会导航但不会突出显示。我应该说我的导航位于 header.php 包含文件中。这是我所拥有的:
<ul class="myNav">
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
$('.myNav li a').click(function (e)
{
e.preventDefault();
$('.myNav li').siblings().removeClass('active');
$(this).parent().addClass('active');
//var url = $(this).attr("href");
//window.location = url;
});
我尝试将页面发送到单击的网址,这会加载正确的页面,但它会删除该类!我想解决这个问题,但我也想了解为什么它不能正常工作。
最佳答案
恐怕您无法仅使用 jQuery 来同时实现突出显示和重定向到页面。您最好尝试将类 active
添加到页面中相应的 li
中,例如在 index.php
页面中添加此行
<li class="active"><a href="index.php">Home</a></li>
因为您无法仅使用 jQuery
来保留菜单的状态。如果页面的此菜单部分位于单独的文件(例如 header.php
)中,那么您必须检测哪一个是当前页面。并且可以轻松检测 php 中的当前页面,并将 class="active"
添加到相应的 li
中以突出显示。
关于php - Jquery 删除和添加事件类到 li 节点以及 PreventDefault 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10691496/