活动菜单未保持活动状态并突出显示

时间：2020-06-27 05:39:59

标签： php html css jquery-ui navbar

请有人帮我。我是编码的新手，我想突出显示活动菜单项。我已经搜寻了将近两个星期，但仍未解决。我已经尝试过使用jQuery CDN；它可以工作，但是当我将所有这些都上传到网络时，它不起作用。当我单击菜单时，它突出显示，然后突然消失。因此，它不适用于Jquery CDN。

这是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>Home</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 

}
.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;
}

请帮助

1 个答案:

答案 0 :(得分：0)

不是这样的答案，但我已尽力纠正了您的HTML标记-它现在可以正确验证，因此本身可能会有所帮助。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Home</title>
        <meta charset='utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <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">
                    
                        <!--///////////////////////////////////////////////////////////////////////
                        
                            The element "button" must not appear as a descendant of the "a" element.
                            The hyperlink has been removed from the DOM which might affect your 
                            layout
                        
                        /////////////////////////////////////////////////////////////////////////-->
                        <!--
                        <a class="navbar-brand" href="/"></a>
                        -->
                        
                        <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 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>
                                    
                                </ul>
                            </div>
                        </div>
                        
                        <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>
                            </div>
                        </div>
                        
                        
                    </div>
                </div>
            </nav>
        </div>
                    
                    
        <!-- Main variables *content* -->
        <script src='//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js'></script>
        <script>
        
            $('#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');
            }
        </script>
    
    </body>
</html>

通过W3c验证程序运行的原始代码产生了以下结果...您将看到它放弃了希望并获得了援助！

W3c Validator results

如果标记改变了版面，请再次查看css并判断上述标记是否为您想要的版面。希望通过有效的标记，您今后应该会遇到更少的问题。

相关问题
最新问题