0

Jquery 在 LI 导航上删除和添加“活动”类与 preventDefault 一起使用，但不再链接

Jquery删除向li节点添加活动类不起作用

我知道删除活动类并将其添加到 li's 以突出显示当前页面的导航项应该是非常基本的，但我一直无法让它工作。

我发现我必须使用 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;
});

我试图将页面发送到点击的 url，这会加载正确的页面，但它会删除类！我想解决这个问题，但我也想了解它为什么不能正常工作。

4

5 回答 5

2

恐怕你不能同时使用onlyjQuery 实现高亮和重定向到页面。您最好尝试在您的页面中active分别添加类li，例如在index.php页面中添加此行

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

因为您不能仅使用jQuery. 如果您页面的此菜单部分位于单独的文件中，header.php那么您必须检测哪一个是当前页面。并且可以很容易地检测 php 中的当前页面并添加class="active"到相应li的突出显示。

于 2012-05-21T19:45:08.037 回答
1

我最终在 PHP 中这样做：

<?php
//grab the current page name to use in the
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
?>

        <li<?php if ($page == 'index') echo 'class="active"';?>><a href="index.php">Home</a></li>
    <li <?php if ($page == 'portfolio') echo "class='active'"; ?> ><a href="portfolio.php">Portfolio</a></li>
    <li <?php if ($page == 'about') echo 'class="active"'; ?> ><a href="about.php">About</a></li>
    <li <?php if ($page == 'contact') echo 'class="active"'; ?> ><a href="contact.php">Contact</a></li>
于 2012-05-24T10:23:38.957 回答
1

当您离开页面时，您在 javascript 中所做的一切都会丢失。唯一的方法是让您的服务器程序设置“活动”标志，可能是通过向链接添加查询参数，或者检查程序的 url

于 2012-05-21T19:43:19.707 回答
1

您必须在 PHP 中通过检测当前 url 并比较导航中节点的 url 来执行此操作。看看这个：如何在 Windows/IIS 服务器上获取当前页面的完整 URL？

于 2012-05-21T19:44:21.377 回答
0 
var link = document.location.href.split('/').slice(-1);   // retrieve page name
$('#menuInner li a.active').removeClass('active');        // remove class 'active'
$('#menuInner li a[href$="'+link+'"]').parent().addClass('active');// and add it to a matching
于 2013-02-20T07:11:18.667 回答