在Navbar中動態設置活動類

最初我有一個引導程序導航欄，我將導航欄代碼硬編碼到我的每個html文件中。我設置活動類的任何頁面的用戶目前正在手動觀看這樣的標籤：在Navbar中動態設置活動類

<ul class="nav navbar-nav"> 
     <li class="active"><a href="homepage.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="map.html">View Map</a></li> 
     <li><a href="index.html">Submit Document</a><li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul>

這工作得很好，但我意識到這是不好的做法重複這樣的代碼，所以我就把導航欄代碼到一個單獨的文件中，將我所有的html文件轉換爲php文件，並使用php include語句在每個頁面中加載導航欄。然後我使用JavaScript嘗試動態設置活動類。不過，當我點擊我的標籤頁時，我無法讓主動類顯示。

<head> 
    <link href="../css/navbar.css" type="text/css" rel="stylesheet" /> 
</head> 

<!-- JAVASCRIPT TO TOGGLE ACTIVE CLASS--> 
<script type="text/javascript"> 
    $(".nav a").on("click", function(){ 
    $(".nav").find(".active").removeClass("active"); 
    $(this).parent().addClass("active"); 
    }); 
</script> 

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Mobile collapse--> 
     <span class="icon icon-bar"></span> 
     <span class="icon icon-bar"></span> 
     <span class="icon icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="homepage.html"> 
     <img src="../images/pksoilogo.png" id="logo"> 
    </a> 
    </div> 
    <div class="collapse navbar-collapse"> <!-- Mobile collapse/Dropdown--> 
    <ul class="nav navbar-nav"> 
     <li><a href="homepage.php">Home</a></li> 
     <li><a href="about.php">About</a></li> 
     <li><a href="map.php">View Map</a></li> 
     <li><a href="index.php">Submit Document</a><li> 
     <li><a href="contact.php">Contact</a></li> 
    </ul> 
    </div> 
</div> 
</nav>

有關如何修正JavaScript來解決這個問題的任何想法？

來源

2015-12-02 ElGatoGabe

編輯 - 對不起，我還沒有看過關於你想要Javascript修復的部分。希望有人能夠儘快給你的問題提供JS解決方案！

下面介紹一種方法。

<ul class="nav navbar-nav"> 
    <li <?php if (basename($_SERVER['PHP_SELF']) == 'homepage.php') echo 'class="active"' ?>><a href="homepage.php">Home</a></li> 
    <li <?php if (basename($_SERVER['PHP_SELF']) == 'about.php') echo 'class="active"' ?>><a href="about.php">About</a></li> 
    <li <?php if (basename($_SERVER['PHP_SELF']) == 'map.php') echo 'class="active"' ?>><a href="map.php">View Map</a></li> 
    <li <?php if (basename($_SERVER['PHP_SELF']) == 'index.php') echo 'class="active"' ?>><a href="index.php">Submit Document</a></li> 
    <li <?php if (basename($_SERVER['PHP_SELF']) == 'contact.php') echo 'class="active"' ?>><a href="contact.php">Contact</a></li> 
</ul>

很明顯，這不是最乾淨的方法，但它很容易。你也可以創建一個你可以調用的函數，使它看起來更好一些。

來源

2015-12-02 03:23:50

在Navbar中動態設置活動類

回答

相關問題