自定义样式的引导下拉菜单

Question

我想在一些字体颜色和背景颜色我的引导下拉菜单，而当我点击特定的选项卡的标签背景和字体颜色希望被改变，我也想更改悬停（或）鼠标悬停上的选项卡背景。我已经使用了一些特定的样式来改变特定点击标签的字体颜色，但是当我将它悬停时，它的颜色不会改变。

这是我的引导Twitter的下拉菜单

<a href="#show_tab" class="dropdown " data-toggle="dropdown" aria-expanded="false"> 
    Reviews <span class="caret"></span></a> 
    <div class="btn-group" style="display: none;"> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#tab1">Tasks </a></li> 
    <li><a href="#tab2"> Tasks1</a</li> 
    <li><a href="#tab3" >Task3</a></li> 
    </ul> 
    </div> 

在此

使用我已经证明了下拉菜单

<script> 
$(function(){ 
    $("a[href='#show_tab']").on(function(e){ 
    $(".btn-group").show(); 
    $(".btn-group").toggleClass('btn-group btn-group open'); 
    }); 
}); 
</script> 

Answer 1

感谢jQuery的。

$(document).ready(function() { 
 
    $(".dropdown-menu li a").click(function(e) { 
 
    e.preventDefault(); 
 
    $(".dropdown-menu li").removeClass('activeTabLink'); 
 
    var activeAttr = $(this).parent('li').addClass('activeTabLink'); 
 
    }); 
 
});

a.dropdown-toggle { 
 
    cursor: pointer; 
 
} 
 
.dropdown-menu, 
 
.dropdown-menu>li>a { 
 
    color: #FFF; 
 
    background-color: #337AB7; 
 
} 
 
.dropdown-menu>li>a:hover { 
 
    color: #FFF; 
 
    background-color: #0065ac; 
 
} 
 
.dropdown.open .dropdown-toggle { 
 
    color: #000; 
 
} 
 
/* Clicked active link color */ 
 

 
.activeTabLink a { 
 
    color: red !important; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div class="dropdown"> 
 
    <a class="dropdown-toggle" type="button" id="menu1" data-toggle="dropdown"> 
 
    Reviews <span class="caret"></span> 
 
</a> 
 
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#tab1">Tasks</a> 
 
    </li> 
 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#tab2">Tasks1</a> 
 
    </li> 
 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#tab3">Task3</a> 
 
    </li> 
 
    </ul> 
 

 
</div> 
 
<div id="tab3"> 
 
    <pre> 
 
    content tab3 
 
    content tab3 
 
    content tab3 
 
    content tab3 
 
    content tab3 
 
    content tab3 
 
    content tab3 
 
    content tab3 
 
    </pre> 
 
</div>