如何在引導程序下拉列表上使用活動類

我有以下引導程序導航欄;如何在引導程序下拉列表上使用活動類

<ul class="nav navbar-nav navbar-right"> 
    <li class="active"><a href="#">Menu 1</a></li> 
    <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 2 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Menu 3</a></li>    
    <li><a href="#">Menu 4</a></li> 
</ul>

當我點擊菜單1，3 & 4我使用以下CSS得到所期望的顏色&背景顏色;

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #fbfbfb; 
    background-color: #105b9c; 
}

當我從下拉菜單中選擇其中一個選項（選項1或選項2）時，我希望菜單2具有相同的效果。目前我沒有得到它。

更新： Fiddel link

來源

2017-06-26 karthi

會發生什麼，如果你點擊'選項1'？你的父母李是否得到'積極'類？ – Huelfe

不，我沒有得到它。 – karthi

你沒有活動課？當然？小提琴會很好。 – Huelfe

我添加了一個新的規則.navbar默認.nav .dropdown.open>一本現有的CSS代碼。

CSS

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .nav .dropdown.open > a 
{ 
    color: #fbfbfb; 
    background-color: #105b9c; 
}

希望這有助於..

來源

2017-06-26 14:28:17

它不工作。 – karthi

當我選擇任何選項時，我希望將活動類單獨應用於Menu 2。 – karthi

與下面的代碼取得它;

$('nav li').on('click', function() { 
    $('nav li').removeClass('active'); 
    $(this).addClass('active'); 
});

小提琴：link

來源

2017-06-26 15:29:58 karthi

如何在引導程序下拉列表上使用活動類

回答

相關問題