Question

我在使用此菜单时遇到活动课程的问题。

enter image description here

正如您在此处所见，现在所有订单选项卡上都有活动类。

我想在每个标签上激活此功能，当我点击它时删除过去的标签类。

此菜单的HTML -

<ul id="mainSideMenu" class="nav nav-list nav-side" >
    <li class="accordion-group">
        <div class="accordion-heading active ">
            <a href="#accDash" id="AllOrders" data-parent="#mainSideMenu"  data-toggle="collapse" class="accordion-toggle ">
                <span class="item-icon fontello-icon-monitor "></span><i class="chevron fontello-icon-right-open-3"></i>
                All Orders
            </a>
        </div>
    </li>
</ul>

这是活跃的课程 -

.nav-side .accordion-group > .active {
    background: url("../img/background/body-bg-02.jpg") repeat scroll 0 0;
}

我试过jQuery -

$(function(){
    $(".accordion-group").click(function(){
        $(".accordion-group").removeClass('.active').addClass('.active');
        $(this).addClass('.active');
    });
});

那是没有发生的

这发生在这里 - Boo admin template

Answer 1

您不需要addClass和removeClass中的前导点为什么要在第二行添加活动类？删除该部分。
您是将该类添加到标题，而不是组？

$(function(){
    $(".accordion-group").click(function(){
        $(".accordion-heading").removeClass('active');
        $(this).find('.accordion-heading').addClass('active');
    });
});

Answer 2

具有.accordion-group类的active不是您需要添加和删除它的地方。此外，您应添加和删除名为active的类，而不是.active。

您似乎在删除活动类后立即重新添加活动类，这是错误的。

$(function(){
   $(".accordion-group").click(function(){
      $(".accordion-group .active").removeClass('active');
      $('.accordion-heading', this).addClass('active');
   });
});

Answer 3

试试这个

$(".accordion-group").removeClass('active').addClass('active');

classname足够。在类名

之前移除.

Answer 4

从班级名称中移除。

$(function(){
$(".accordion-group").click(function(){
$(".accordion-group").removeClass('active').addClass('active');
$(this).addClass('active');
});
});

Answer 5

$(this).addClass('active');

删除.

详细了解.addClass()和.removeClass()

Answer 6

<ul class="ulVertical">
        <li id="firstLink" class="vertical-selected-li">My First Link</li>
        <li id="secondLink" class="">My Second List</li>
        <
    </ul>

<script type="text/javascript">
$(document).ready(function () { 
    $("#secondLink").click(function () {

    $(this).siblings().removeClass('vertical-selected-li');
    $(this).addClass('vertical-selected-li');

    }); 
});
</script>

Answer 7

由于这似乎是一个手风琴插件，我认为点击是由“a”捕获而不是支持li.accordion-group（这就是为什么你的代码似乎没有执行），你是否尝试听“a”上的事件而不是“li”？

类似

$(function(){
    $(".accordion-group .accordion-heading a").click(function(){
        $(".accordion-heading").removeClass('active');
        $(this).parent().addClass('active');
    });
});

不过，我会使用.on（）方法代替.click（）：）

jQuery：如何添加活动的选定菜单类？

7 个答案: