Question

Jquery删除＆amp;在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

我担心使用only jQuery无法同时突出显示和重定向到页面。您最好尝试将类active添加到网页中的相应li，例如在index.php页面中添加此行

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

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

Answer 2

当您离开页面时，无论您在javascript中执行的操作都将丢失。唯一的办法是让你的服务器程序设置'active'标志，可能是通过向链接添加查询参数，或者通过检查程序的url

Answer 3

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

Answer 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>

Answer 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

Jquery删除并向li节点添加活动类＆amp; preventDefault的问题

5 个答案: