php - Jquery 删除和添加事件类到 li 节点以及 PreventDefault 的问题

Question

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;
});

我尝试将页面发送到单击的网址，这会加载正确的页面，但它会删除该类!我想解决这个问题，但我也想了解为什么它不能正常工作。

Answer 1

恐怕您无法仅使用 jQuery 来同时实现突出显示和重定向到页面。您最好尝试将类 active 添加到页面中相应的 li 中，例如在 index.php 页面中添加此行

  <li class="active"><a href="index.php">Home</a></li>

因为您无法仅使用 jQuery 来保留菜单的状态。如果页面的此菜单部分位于单独的文件(例如 header.php)中，那么您必须检测哪一个是当前页面。并且可以轻松检测 php 中的当前页面，并将 class="active" 添加到相应的 li 中以突出显示。