导航栏onclick不使用jquery添加类

Question

在我的导航栏中，我需要在导航栏列表中添加一个“活动”类。我的问题是添加课程页面后刷新并且活动课程再次隐藏。请帮助。我不知道该怎么办。

HTML

<div class="navigation_part">
    <div id="top-nav">
        <ul>    
            <li class=""><a href="index.php">Home</a></li>                       
            <li class=""><a href="about.php">About&nbsp;Us</a></li>
            <li class=""><a href="entrepreneurs.php">Entrepreneurs</a></li>         
            <li class=""><a href="investors.php">Investors</a></li>
            <li class=""><a href="contactus.php">Contact&nbsp;Us</a></li>   
        </ul>   
        <div class="nav_bar_underline"></div>
    </div>
</div>

jQuery

$(document).ready(function() {
// I tried these both but both not working
$('.navigation_part li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
});
$('.navigation_part li a').click(function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$('.navigation_part li').removeClass('current');
$(this).parent().addClass('current');
});  });

如果我使用preventDefault() href 的锚点不起作用...

Answer 1

当您导航到另一个页面时，使用 JavaScript 对当前页面所做的任何更改都将丢失。浏览器不会自动将更改应用到其他页面上的菜单（无论如何，这是一个不同的菜单。）

除非您有一些动态系统来捕获点击并使用 AJAX 更改页面内容，但这似乎不太可能。

实现您可能需要的最简单的方法是在服务器端进行，因为您似乎使用的是 PHP：

<li class="<?php if( __FILE__ === "index.php" ) echo "actuve"; ?>"><a href="index.php">Home</a></li> 
<li class="<?php if( __FILE__ === "about.php" ) echo "active"; ?>"><a href="about.php">About&nbsp;Us</a></li> 
...etc

Answer 2

用php可以做得更好 执行以下操作

在 index.php、contactus.php、aboutus.php 等每个页面中，在顶部添加此代码

  <?php $page= basename($_SERVER['PHP_SELF']);
    include ("header.php");
     ?>

header.php 修改

<div class="navigation_part">
    <div id="top-nav">
        <ul>    
            <li class="<?php echo ($page == "index.php" ? "active" : "")?>"><a href="index.php">Home</a></li>                       
            <li class="<?php echo ($page == "about.php" ? "active" : "")?>"><a href="about.php">About&nbsp;Us</a></li>
            <li class="<?php echo ($page == "entrepreneurs.php" ? "active" : "")?>"><a href="entrepreneurs.php">Entrepreneurs</a></li>         
            <li class="<?php echo ($page == "investors.php" ? "active" : "")?>"><a href="investors.php">Investors</a></li>
            <li class="<?php echo ($page == "contactus.php" ? "active" : "")?>"><a href="contactus.php">Contact&nbsp;Us</a></li>   
        </ul>   
        <div class="nav_bar_underline"></div>
    </div>
</div>