Question

我有一个标签框，标签中有3个表单。

在页面加载时，第一个表单或选项卡应处于活动状态。

 <ul id="myForm" class="nav nav-tabs">
      <li class="active"><a href="#form1" data-toggle="tab">Form1</a></li>
      <li><a href="#form2" data-toggle="tab">Form2</a></li>
      <li><a href="#form3" data-toggle="tab">Form3</a></li>
    </ul>

使用JS，活动类在每个链接之间切换没有问题。

我这样做，

<script>
$('#myForm a').click(function (e) {
    var tab = $(this);
    if(tab.parent('li').hasClass('active')){
        window.setTimeout(function(){
            $(".tab-pane").removeClass('active');
            tab.parent('li').removeClass('active');
        },1);
    }
});
</script>

为了保持隐藏所有表格，我有这样的CSS，

#form1 {
    display: none;
}

#form1 .active {
    display: block;
}

#form2 {
    display: none;
}

#form2 .active {
    display: block;
}

#form3 {
    display: none;
}

#form3 .active {
    display: block;
}

我认为问题是主动链接切换到每个li标记但从不切换到#form1 #form2 #form3 ID因此标签框保持空白。

解决此问题的合理方法是什么？

您可以看到此问题Here

Answer 1

您忘记在代码中使用addClass，而不是再次使用removeClass：

$('#myForm a').click(function (e) {
    var tab = $(this);
    if(tab.parent('li').hasClass('active')){
        window.setTimeout(function(){
            $(".tab-pane").removeClass('active');
            tab.parent('li').addClass('active'); //instead of removeClass
        },1);
    }
});

另外，你的css不正确：

而不是像下面那样：

#form3 .active {
    display: block;
}

使用如下：

.active #form3 {
    display: block;
}

请检查您的html标记以确认。

在应用活动类时更改状态的表单

1 个答案: