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

Question

I have a site and i am working in php html css javascript/jquery i am using bootstrap theme for the first time. 我有一个网站，我在php html css javascript / jquery中工作，这是我第一次使用bootstrap主题。 Its so good using bootstrap but i have a problem in menu bar navigation active link 使用引导程序是如此好，但是我在菜单栏导航活动链接中有问题

even if i add a jquery changing a active class it doesnot work . 即使我添加了更改活动类的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>

i added following jquery to change the active class but also its not working properly 我添加了以下jQuery来更改活动类，但也无法正常工作

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

Answer 1

I think it might be because your menu loads different pages than the one you are on. 我认为这可能是因为您的菜单加载的页面不同于您所在的页面。 You need to set the active class on the appropriate nav link on page load. 您需要在页面加载时在相应的导航链接上设置活动类。 For example you could test if the href of the link is the same as the current page name and add class "active" if it is. 例如，您可以测试链接的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