最初我有一个引导程序导航栏,我将导航栏代码硬编码到我的每个html文件中。我设置了用户当前手动查看的任何页面的选项卡的活动类,如下所示:
<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以修复此问题,有什么想法吗?
EDIT-对不起,我没有读过关于你想要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>
显然,这不是最干净的方法,但很容易。您还可以创建一个可以调用的函数,使其看起来更好。