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

我試圖將頁面發送到單擊的URL，這將加載正確的頁面，但是它將刪除該類！ 我想解決此問題，但我也想了解為什么它無法正常工作。

Answer 1

恐怕only使用jQuery不能同時實現突出顯示和重定向到頁面。 您最好嘗試將active類添加到頁面中的相應li ，例如在index.php頁面中添加以下行

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

因為您不能僅使用jQuery來保留菜單的狀態。 如果頁面的此菜單部分位於header.php類的單獨文件中，則您必須檢測哪個頁面是當前頁面。 並且可以輕松地檢測php中的當前頁面，並在相應的li添加class="active"以突出顯示該頁面。

Answer 2

當您退出頁面時，使用javascript所做的任何操作都會丟失。 唯一的方法是讓您的服務器程序設置“活動”標志，可能是通過向鏈接添加查詢參數，或者通過檢查程序的url來進行。

Answer 3

您必須在PHP中通過檢測當前URL並比較導航中節點的URL來執行此操作。 檢查一下： 如何在Windows / IIS服務器上獲取當前頁面的完整URL？

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