Question

我希望我的引导下拉菜单有一些字体颜色和背景颜色，而我点击特定标签时要更改标签背景和字体颜色，我还想更改标签背景在悬停（或）鼠标悬停。我使用了一些特定的样式来更改特定点击标签的字体颜色，但是当我将鼠标悬停时，它的颜色没有变化。

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

自定义样式Bootstrap下拉菜单

1 个答案: