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>

导航栏onclick不使用jquery添加类

2 个答案:

header.php已修改