如何在下拉列表

时间:2018-02-06 06:18:48

标签: javascript php jquery html css

请帮我解决这个问题。 下面是我的导航栏。我使用Bootstrap 3作为导航栏。 如何将活动类添加到当前列表锚标记,并在下拉菜单中将活动类添加到父列表锚标记。 下面是我的html,css和js文件。 请指导我解决我的问题。



//dropdown menu
            $('.nav_bar_custom .drop_menu1').hover(function() {
                $(this).children('ul').stop(true, false, true).slideToggle(300);
            });
            

var path = window.location.pathname.split("/").pop();
if ( path == '' ) {
    path = 'index.php';
}
var target = $('nav .nav_bar_custom li a[href="'+path+'"]');
target.addClass('active_menu');

.navigation{
     background: #304269;
     
}

.nav li a{ color: #fff;}
nav li{ 
  display: inline-block;
  float: left;
}

.nav li .drop_menu2 li{
  display: block;
  
  float: none;
}

nav ul li a.active_menu {
    color: #0BADEE;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="navigation clearfix" id="navigation">

    <nav>
      <ul class="nav navbar-nav navbar-right nav_bar_custom">
         <li>
            <a href="index.php">Home</a>
         </li>
         <li class="drop_menu1">
            <a href="training.php">Training</a>
          <ul class="drop_menu2" id="drop_menuT" style="display: none;">
             <li>
                 <a href="basic.php">Basic</a>
             </li>
             <li>
                 <a href="intermediate.php">Intermediate</a>
              </li>
              <li>
                 <a href="advance.php">Advance</a>
              </li>
           </ul>
          </li>
          <li>
              <a href="blog.php">Blog</a>
          </li>
          <li>
              <a href="contact.php">Contact</a>
          </li>
         </ul>
      </nav>
 </div>
 
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
 
 
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

请使用以下脚本:

<script>
    var path = 'basic'; //Dynamic value using PHP
    var target = $("a[href$='"+path+"']");
    target.addClass('active_menu');
    target.parent().parent().parent().find('a:first').addClass('active_menu');
</script>