html tabs removeClass& jquery中的addClass不起作用

时间:2012-11-20 07:51:10

标签: jquery html asp.net-mvc

我现在有一个带有标签的索引页面,它们还没有链接到任何地方,但是当我点击一个标签时我正试图设置活动类。

以下是标签:

<ul class="nav nav-tabs">
            @foreach(var division in Model)
            {
                <li class="span2""><a href="#">@division.Description</a></li>
            }
            <li class="active span2"><a href="#">All</a></li>
            <li class="span2"><a href="#">Summary</a></li>
        </ul>

和jquery:

<script type="text/javascript">

$(document).ready(function() {
     $("#tabs li").click(function() {
        $("#tabs li").removeClass('active'); 
        $(this).addClass("active");
        $(".tab_content").hide();
        $(selected_tab).fadeIn();
        var selected_tab = $(this).find("a").attr("href");
    });
});

我还尝试在指向函数SetActiveTab()的选项卡上设置onclick事件,并尝试删除其中的活动类但这也不起作用:

function SetActiveTab() {
    $("#tabs li").removeClass("active");
}

我在这里缺少什么?

2 个答案:

答案 0 :(得分:1)

您正尝试通过ID li引用#tabs的父元素。可能是您的代码段不完整,而#tabs确实有父li元素,但如果不是,您可以使用li.nav或两者同时访问.nav-tabs .nav.nav-tabs。此外,通过这种方式,您将访问页面上的所有选项卡集,而不仅仅是具有特定ID的选项卡。

示例:

$(document).ready(function() {
     $(".nav.nav-tabs li").click(function() {
        $("#tabs li").removeClass('active'); 
        $(this).addClass("active");
        $(".tab_content").hide();
        $(selected_tab).fadeIn();
        var selected_tab = $(this).find("a").attr("href");
    });
});

或者,您可以为li的父元素指定ID:

<ul class="nav nav-tabs" id="tabs">

答案 1 :(得分:-1)

您的所有代码都引用了#tabs,但您的“ul”没有“标签”ID。