菜單欄class =活動的引導主題無法正常工作

Question

我有一個網站，我在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");
            });

Answer 1

我認為這可能是因為您的菜單加載的頁面不同於您所在的頁面。 您需要在頁面加載時在相應的導航鏈接上設置活動類。 例如，您可以測試鏈接的href是否與當前頁面名稱相同，並添加“ active”類。

菜單欄class =活動的引導主題無法正常工作

問題描述

1 個解決方案

解決方案1
0 已采納 2015-04-08 08:44:36

菜單欄class =活動的引導主題無法正常工作

問題描述

1 個解決方案

解決方案1 0 已采納 2015-04-08 08:44:36

解決方案1
0 已采納 2015-04-08 08:44:36