Jquery删除活动类并将其添加到li节点和preventDefault问题

Posted 2023-05-08

【中文标题】Jquery删除活动类并将其添加到li节点和preventDefault问题

【英文标题】：Jquery removing and adding active class to li nodes & issues with preventDefault

【发布时间】：2012-05-28 07:43:57

【问题描述】：

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，这会加载正确的页面，但它会删除类！我想解决这个问题，但我也想了解它为什么不能正常工作。

【问题讨论】：

如果您单击一个链接并转到一个新页面，那么通过 javascript 在前一页面上所做的任何更改都不会生效。

您是否真的希望链接能够正常工作，转到另一个页面，然后记住您的功能并在该新页面上突出显示某些内容。如果是这样你就误会了！

我明白了。因此，当它进入下一页时，对类属性的更改会丢失，并且会再次加载默认值。我在接下来的所有类型的帖子中都看到了使用 jquery 将类更改为活动的导航链接。如果他们在导航到新页面时失去了班级，这似乎很奇怪。那将是完全没有意义的。所以，我认为这与它在头包含文件中的事实有关，但我不确定为什么会这样，或者是我向 li 添加了一个类而不是事实到一个节点？

【参考方案1】：

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

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

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

【参考方案2】：

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

【讨论】：

没有理由使用查询参数，因为您可以访问 PHP 中的 url。

【参考方案3】：

您必须在 PHP 中通过检测当前 url 并比较导航中节点的 url 来执行此操作。看看这个：How can I get the current page's full URL on a Windows/IIS server?

【讨论】：

其实你什么都不用做，有cookies和本地存储可以毫无问题地处理这个问题，如果是普通的html页面，@Joy的回答就可以了很好，不需要 PHP。

Adeneo，最好的处理方法是在服务器端。 Cookie 不可靠，可能会被删除，并非所有浏览器都支持本地存储。

@Interstellar_Coder - 同意，但你仍然不必使用 PHP，有几种方法可以做到，而普通的 HTML，只需添加一个类，是最简单的一种，而且它确实有与 PHP 无关，即使该文件被称为 index.php 并通过 PHP 解析器运行。给出的答案是获取页面的 URL 并将其与导航进行比较，难道我们不能像在 JS 中那样轻松地做到这一点吗？

adeneo，是的，您并不需要 url，因为您知道请求的是哪个文件，只需根据请求的 php 文件更改标记即可。我想这就是快乐所暗示的，也是我所指的。

是的，您可以在 js 中获取 url，如果用户更熟悉 JS 而不是 PHP，这是一个完全有效的选择。但它在 PHP 中更好，因为 JS 可以被禁用，并且在页面开始加载和 JS 运行之间会有一瞬间。更不用说在 PHP 而不是 JS 中创建在页面生命周期内不会改变的 html 是更好的做法。

【参考方案4】：

我最终在 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>

【参考方案5】：

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