导航栏

Question

我使用bootstrap和导航栏

我想自定义“活跃的”＃39;与另一个班级。

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

$(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');

 });
});

我们的想法是取消课程“活跃”课程。并添加我的课程。

目前：

<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

最有可能的是，你不需要这个。

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

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

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

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

现在，您只需应用active类：

即可

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