在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中动态设置活动类

回答

相关问题