活动导航栏不保持突出显示

Question

I'm new to this website, and for coding, I'm trying to highlight the active menu item.我是这个网站的新手，为了编码，我试图突出显示活动的菜单项。 I have been searching for almost two weeks, but it is still not resolved.我已经搜索了将近两个星期，但仍然没有解决。 I have tried with Jquery CDN;我试过 Jquery CDN； it works, but when I upload all this to the web, it doesn't work.它有效，但是当我将所有这些上传到 web 时，它不起作用。 When I click the menu, it highlights, then disappears suddenly.当我单击菜单时，它会突出显示，然后突然消失。 So it didn't work with Jquery CDN.所以它不适用于 Jquery CDN。 Here is the script tag I have used to link to the Jquery CDN.这是我用来链接到 Jquery CDN 的script标签。

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script  type="text/javascript">
  $(document).on('click', 'ul li', function(){
    $(this).addClass('active').siblings().removeClass('active')
  })
</script>

And here is a CodePen demonstrating the problem: https://codepen.io/lukeroy/pen/PoZWpKm这是一个演示问题的CodePen：https://codepen.io/lukeroy/pen/PoZWpKm

HTML: HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>New order</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  
  </head>
<body class="dahshat-board">

    <div id="main-wrap">
    <nav class="navbar navbar-default ">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">
                        
          <div class="sidebar-pinner">
            <button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <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>
        <div id="scrollNav">


        <div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                                          <li class="active" ><a href="#">Home</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">History</a></li>
                      <li><a href="#">Support</a></li>
                      <li><a href="#">Terms</a></li>
                      <li><a href="#">FAQ</a></li>
        </div>
      </div>
    </nav>
    <div class="nav-bottom">
      <div class="container">
          <ul class="nav page-navigation">
                                    <li class="active" ><a href="#">Home</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">History</a></li>
                      <li><a href="#">Support</a></li>
                      <li><a href="#">Terms</a></li>
                      <li><a href="#">FAQ</a></li>
                    
                                                                              </ul>
          </ul>

      </div>
    </div>
    <!-- Main variables *content* --> 
  


<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript">
  $("#toi").click(function(e) {
    e.preventDefault();
    $("#main-wrap").toggleClass("launched");
  });
  if ($(window).width() < 768) {
    $('#main-wrap').removeClass('launched');
    $(".mobileSearch a").click(function(e){
      e.preventDefault();
      $(".search-bar").toggleClass("toggleSearch");
    });
  } else {
    $('#main-wrap').addClass('launched');
  }
  /*$(window).scroll(function() {
      var nav = $('#scrollNav');
      if ($(window).scrollTop() >= 10) {
          nav.addClass('fixedNav');
      } else {
          nav.removeClass('fixedNav');
      }
  });*/
</script>

</body>
</html>

CSS: CSS：

}
.dahshat-board .navbar-default {
    background-color: transparent;
    border-color: transparent;
    padding: 10px 0;
    margin: 0;
    background-image: none;
}
.nav-bottom {
    position: relative;
    z-index: 3;
}
.nav.page-navigation {
    background: #fad534;
    border-radius: 500px;
    display: flex;
    width: 100%;
    position: relative;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
    justify-content: center;
}
.nav.page-navigation li {
    display: inline-flex;
    width: auto;
    align-items: center;
    flex: 0 0 10.85%;
    flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
    display: block;
    width: auto;
    text-align: left;
}
.nav-bottom .nav li .ico {
    margin-right: 4px;
    width: 28px;
    height: 28px;
    background: #2b1f60;
    border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
    background: #fad534;
    border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
    filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
    font-size: 13px;
    line-height: 44px;
    color: #2a1e5e;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    padding: 2px 9px;
    border-radius: 500px;
    white-space: pre;
    width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
    /* background: transparent;
    border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
    background: transparent;
    outline: none;
}
.nav-bottom .nav .dropdown li a {
    line-height: 18px;
    display: block;
    padding: 4px 10px;
    position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
    position: absolute;
    right: 8px;
    top: 13px;
    padding: 3px 7px;
    font-size: 10px;
}
.nav-bottom .nav li.active a {
    color: #fad534;
    background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
    display: none;
}
.navbar-collapse.mobileNav{
    padding:0;
}
.navbar-collapse.collapse.mobileNav ul.navbar-nav.nav {
    display: none;
}
.nav-bottom .nav li.dropdown.open .dropdown-menu a {
    background: transparent;
    border-radius: 0;
    color: #2a1e5e;
}

Answer 1

 $("#toi").click(function(e) { e.preventDefault(); $("#main-wrap").toggleClass("launched"); }); if ($(window).width() < 768) { $('#main-wrap').removeClass('launched'); $(".mobileSearch a").click(function(e){ e.preventDefault(); $(".search-bar").toggleClass("toggleSearch"); }); } else { $('#main-wrap').addClass('launched'); } /*$(window).scroll(function() { var nav = $('#scrollNav'); if ($(window).scrollTop() >= 10) { nav.addClass('fixedNav'); } else { nav.removeClass('fixedNav'); } });*/ $(document).on('click', 'ul li', function(){ $("ul li").removeClass('active'); $(this).addClass('active'); });

 .dahshat-board.navbar-default { background-color: transparent; border-color: transparent; padding: 10px 0; margin: 0; background-image: none; }.nav-bottom { position: relative; z-index: 3; }.nav.page-navigation { background: #fad534; border-radius: 500px; display: flex; width: 100%; position: relative; box-shadow: 0 2px 10px 0 rgba(0,0,0,.08); justify-content: center; }.nav.page-navigation li { display: inline-flex; width: auto; align-items: center; flex: 0 0 10.85%; flex-grow: 1; }.nav-bottom.nav.dropdown li { display: block; width: auto; text-align: left; }.nav-bottom.nav li.ico { margin-right: 4px; width: 28px; height: 28px; background: #2b1f60; border-color: #2b1f60; }.nav-bottom.nav li.active.ico { background: #fad534; border-color: #fad534; }.nav-bottom.nav li.active.ico img { filter: invert(1) brightness(100%) saturate(0); }.nav-bottom.nav li a { font-size: 13px; line-height: 44px; color: #2a1e5e; display: flex; justify-content: center; position: relative; align-items: center; padding: 2px 9px; border-radius: 500px; white-space: pre; width:100%; }.nav-bottom.nav li.dropdown.open a.dropdown-toggle { /* background: transparent; border: none; */ }.nav-bottom.nav li a:hover, .nav-bottom.nav li a:active, .nav-bottom.nav li a:focus { background: transparent; outline: none; }.nav-bottom.nav.dropdown li a { line-height: 18px; display: block; padding: 4px 10px; position: relative; }.nav-bottom.nav.dropdown li a.badge { position: absolute; right: 8px; top: 13px; padding: 3px 7px; font-size: 10px; }.nav-bottom.nav li.active a { color: #fad534; background-color: #270044; }.nav-bottom.nav.dropdown li a::after, .nav-bottom.nav.dropdown li a::before { display: none; }.navbar-collapse.mobileNav{ padding:0; }.navbar-collapse.collapse.mobileNav ul.navbar-nav.nav { display: none; }.nav-bottom.nav li.dropdown.open.dropdown-menu a { background: transparent; border-radius: 0; color: #2a1e5e; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title>New order</title> <meta name="keywords" content=""> <meta name="description" content=""> <script src="https.//code.jquery.com/jquery-3.5.1:js"></script> <script src="https.//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> </head> <body class="dahshat-board"> <div id="main-wrap"> <nav class="navbar navbar-default "> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/"> <div class="sidebar-pinner"> <button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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> <div id="scrollNav"> <div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active" ><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">History</a></li> <li><a href="#">Support</a></li> <li><a href="#">Terms</a></li> <li><a href="#">FAQ</a></li> </div> </div> </nav> <div class="nav-bottom"> <div class="container"> <ul class="nav page-navigation"> <li class="active" ><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">History</a></li> <li><a href="#">Support</a></li> <li><a href="#">Terms</a></li> <li><a href="#">FAQ</a></li> </ul> </ul> </div> </div> <!-- Main variables *content* --> </body> </html>

First remove active class from all li tags by using $("ul li").removeClass('active');首先使用$("ul li").removeClass('active');从所有li标签中删除活动 class； ,After that add active class to the clicked item by using $(this).addClass('active'); ,然后使用$(this).addClass('active'); 将活动 class 添加到单击的项目；

活动导航栏不保持突出显示

问题描述

1 个解决方案

解决方案1
0 2020-06-20 16:04:43

活动导航栏不保持突出显示

问题描述

1 个解决方案

解决方案1 0 2020-06-20 16:04:43

解决方案1
0 2020-06-20 16:04:43