菜单栏class=活动引导程序主题无法正常工作

Menu bar class=active bootstrap theme not working properly

本文关键字：常工作 工作 class 活动 引导程序 菜单栏      更新时间：2023-09-26

我有一个网站，我在php html css javascript/jquery中工作我第一次使用bootstrap主题。使用引导程序很好，但我在菜单栏导航活动链接中有问题

即使我添加了一个jquery来更改一个活动类，它也不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Real Estate</title>
<meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />
  <link rel="stylesheet" href="assets/style.css"/>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  <script src="assets/script.js"></script>
<!-- Owl stylesheet -->
<link rel="stylesheet" href="assets/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!-- Owl stylesheet -->

<!-- slitslider -->
    <link rel="stylesheet" type="text/css" href="assets/slitslider/css/style.css" />
    <link rel="stylesheet" type="text/css" href="assets/slitslider/css/custom.css" />
    <script type="text/javascript" src="assets/slitslider/js/modernizr.custom.79639.js"></script>
    <script type="text/javascript" src="assets/slitslider/js/jquery.ba-cond.min.js"></script>
    <script type="text/javascript" src="assets/slitslider/js/jquery.slitslider.js"></script>
<!-- slitslider -->
    <script>
        $(document).ready(function(e) {
            $('#username').hover(
                function (){
                    $('#submenu').css("display", "block");
                     /*$('#submenu').css("background-color", "#999");
                     $('#submenu').css("color", "#000");*/
                     $('#submenu').css("z-index", "1");
                },
                function () {
                    $('#submenu').css("display", "none");
                }
            );

        });
    </script>
</head>
<body>

    <!-- Header Starts -->
    <div class="navbar-wrapper">
            <div class="navbar-inverse" role="navigation">
              <div class="container">
                <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" 
             data-target="#example-navbar-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
       </div>
       <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
             <li class="active"><a href="index.php">Home</a></li>
             <li><a href="agent.html">Agents</a></li>
             <li><a href="contact.php">Contact Us</a></li>
             <li><a href="about.php">About Us</a></li>
             <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Your Name<b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                   <li><a href="register.php">Edit Profile</a></li>
                   <li><a href="logout.php">Log Out</a></li>
                </ul>
             </li>
                <li><a href="login.php">Log in</a></li>
                <li><a href="register.php">Register</a></li>
       </div>
    </nav>
              </div>
            </div>
        </div>
    <!-- #Header Starts -->


    <div class="container">
    <!-- Header Starts -->
    <div class="header">
    <a href="index.php"><img src="images/logo.png" alt="Realestate"></a>
         <ul class="pull-right" style="margin-top:10px;">
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
                </a>
                <?php if (!empty($_SESSION['uname'])) { ?>
                <ul class="dropdown-menu">
                   <li><a href="homesaleAdd.php">Add Property</a></li>
                        <li><a href="selectpropertyHome.php">Edit Property</a></li>
                </ul>
                 <?php } ?>  </li>   
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Land
                </a>
                <?php if (!empty($_SESSION['uname'])) { ?>
                <ul class="dropdown-menu">
                   <li><a href="landsaleAdd.php">Add Property</a></li>
                        <li><a href="selectpropertyLand.php">Edit Property</a></li>
                </ul>
              <?php } ?></li>
          </ul>
                 <!-- <div id ="salesBranch" style="display:none">
                                <div> <a href="saleAdd.php">Add Property</a> </div> <div> <a href="saleEdit.php">Edit Property</a> </div> -->
                            </div>
    </div>
    <!-- #Header Starts -->
    </div>

我添加了以下jquery来更改活动类，但它也不能正常工作

$(".nav a").on("click", function(){
               $(".nav").find(".active").removeClass("active");
               $(this).parent().addClass("active");
            });

我认为这可能是因为你的菜单加载的页面与你所在的页面不同。你需要在页面加载时在适当的导航链接上设置活动类。例如，您可以测试链接的href是否与当前页面名称相同，如果是，则添加类"active"。

相关文章：