jquery - Bootstrap 下拉菜单的自定义样式

Question

我想让我的 bootstrap 下拉菜单有一些字体颜色和背景颜色，当我单击特定选项卡时，选项卡背景和字体颜色想要更改，我还想在悬停时更改选项卡背景(或)鼠标悬停。我使用了一些特定的样式来更改特定点击选项卡的字体颜色，但当我悬停它时它的颜色没有改变。

这是我的 bootstrap 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>

在此通过使用 jquery 我显示了下拉菜单

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

Answer 1

谢谢。

$(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>