Bootstrap 导航栏上的不同活动 class

Question

我使用bootstrap和导航栏

我想用不同的 class 自定义 'active'。

我做到了，但我似乎无法完成：

$(function() {
$('.nav li a').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.closest('ul').children('li').removeClass('active');
    $this.parent().addClass($this.attr('class').split(' ').slice(0)+'active');

 });
});

我的想法是删除 class 'active' 并添加我的 class.

目前：

<ul class="nav navbar-nav navbar-left">
  <li class="toto">
  <li class="titi">
</ul>

获得：

<ul class="nav navbar-nav navbar-left">
 <li class="toto totoactive">
 <li class="titi">
</ul>

或

<ul class="nav navbar-nav navbar-left">
 <li class="toto">
 <li class="titi titiactive">
</ul>

感谢您的帮助

Answer 1

您很可能不需要这个。

您可以为每个元素定义 CSS 规则 active:

.toto.active {
    background-color: yellow;
}

.titi.active {
    background-color: green;
}

例如，第一条规则将仅应用于同时具有 toto 和 active class 的元素。

现在，您只需申请 active class:

<ul class="nav navbar-nav navbar-left">
    <li class="toto">
    <li class="titi active"> <!-- .titi.active rule applied -->
</ul>

<ul class="nav navbar-nav navbar-left">
    <li class="toto active"> <!-- .toto.active rule applied -->
    <li class="titi active">
</ul>

Bootstrap 导航栏上的不同活动 class

Bootstrap different active class on navbar

css

jquery

navbar