Question

我正在使用bootstrap模式来表示需要分两步填写的表单。在模态中，我使用制表符来显示两种形式。以下是我在模态体内的ul：

<ul id="example-user-tabs" class="nav nav-tabs" data-toggle="tabs">
<li id="tab1" class="active"><a href="#form1_details" data-toggle="tab">FORM1</a></li>
<li id="tab2"><a href="#questionaire" data-toggle="tab">Questionaire</a></li>
</ul>

以下是如何定义选项卡窗格：

 <div class="tab-pane active in" id="form1_details">
<div class="tab-pane active in" id="questionaire">

以上两个窗格都包含其中的表单。现在手动更改选项卡工作正常但不通过jquery编程。

在第一个表单中，我有一个链接，当点击时，应该切换标签：

<a href="javascript:void(0);" id="to_questionaire">Next</a>

以下是我通过jquery切换标签的方法。但由于某种原因，根本没有任何事情发生。

$("#to_questionaire").click(function(){
        $('#example-user-tabs a[href="#questionaire"]').tab('show');
    });

如果有人知道如何解决这个问题会很棒。

注意：请不要将此标记为重复，因为Stackoverflow线程的解决方案都没有解决我的问题。我已经完成了所有这些。

Answer 1

首先，你的js中有错误的id，因为HTML中没有“问题”

和工作代码应如下所示

$("#to_questionaire").on('click',function(){
    $('.active').removeClass('active');
        $('#example-user-tabs li').next('li').find('a[href="#questionaire"]').addClass('active').tab('show');
    });

Jquery - 引导选项卡在单击时不会更改

1 个答案: