Question

Jquery 删除 & amp; 添加 LIL 导航工程活动类, 防止 Default, 但链接不长

Jquery 删除工作无效的 li 节点中添加的活动类

我知道删除活动类并将其添加到 lis 应该是非常基本的, 以便突出显示当前 page s nav 项, 但我一直无法让它工作。

我发现我必须使用 e. preventionDefault () 来使其生效, 但当我使用链接时, 无法工作, 但突出显示的 nav 项是有效的。如果我删除了该防止 Default (), 它会导航, 但不会突出显示。我应该说, 我的 NAv 正在坐在信头. 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 上, 这加载了正确的页面, 但它删除了该类! 我想解决这个问题, 但我也想知道为什么它工作不正确。

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

Answer 2

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

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

因为您仅使用 jQuery 无法保存菜单状态。如果您页面的此菜单部分位于像 header.php 这样的分隔文件中, 那么您必须检测哪个是当前页面。而且可以很容易地在php 中检测到当前页面, 并在相应的 class=" 中添加 class=" " 到相应的 li 来突出显示这一点。

Answer 3

当您浏览页面时, 无论您在 Javascript 中做什么, 都会丢失。唯一的办法是您的服务器程序设置活动标志, 也许在链接中添加查询参数, 或者检查程序 s url

Answer 4

您必须在 PHP 中通过检测当前 URL 并比较您导航中节点的 URL 来做到这一点。请查看 : < a href="https:// stackoverflow. com/ questions/ 189113/ how-do- i- get- put- page- full- url- in- php" 。 <我如何在 Windows/ IIS 服务器上获取当前页面的完整 URL?

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

友情链接