个人中心
gpt4 book ai didi

javascript - 菜单栏 class=active bootstrap 主题无法正常工作

转载 作者：行者123 更新时间：2023-11-28 08:05:26 25 4
gpt4 key购买 nike

我有一个网站，我正在使用 php html css javascript/jquery我是第一次使用 Bootstrap 主题。使用 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”。

关于javascript - 菜单栏 class=active bootstrap 主题无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29509351/

25 4 0
文章推荐： javascript - 按需 infovis 超树节点
文章推荐： c++ - 如何跟踪检测到的对象
文章推荐： javascript - "infinite"滚动时 AJAX 数据加载不正确
文章推荐： ios - super View 的顶部空间不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com