点击按钮时更改活动的Bootstrap选项卡

Question

我希望在单击另一个按钮时更改活动的Bootstrap选项卡。

我已经尝试为选项卡添加ID并编写自定义jQuery代码。

$('#emailNotify').click(function () {
    $('#notify').addClass('active').attr('aria-expanded','true');
    $('#myacc').removeClass('active').attr('aria-expanded','false');
});

这段代码第一次点击时可以正常工作，但当我尝试再次点击“我的账户”选项卡时，它无法恢复原状。

标记：

<ul class="content-list museo_sans500">
<li><a href="javascript:void(0)">Change Password</a></li>
<li><a id="emailNotify" data-toggle="tab">Change Email Notifications</a></li>
<li><a href="javascript:void(0)">Change Profile Picture</a></li>
</ul>

- Farjad Hasan

---

请您添加标记吗？ - DinoMyte

我已经添加了标记。@DinoMyte - Farjad Hasan

$( "#tabs" ).tabs({ active: 0
}); 这是我在 jQuery 中的做法。这将是第一个选项卡。 - Fintan Creaven

@NuttyProgrammer，你的选项卡是否使用了data-toggle="tab"？ - Assem

@bigOTHER 是的，我正在使用 data-toggle='tabs'。 - Farjad Hasan

Answer 1

您可以使用以下方法在单击事件按钮上更改活动选项卡：

$('#changetabbutton').click(function(e){
    e.preventDefault();
    $('#mytabs a[href="#second"]').tab('show');
})

这里有一个带有示例的 JSFiddle：

http://jsfiddle.net/4ns0mdcf/

- Carlos Mayo

Answer 2

您应该使用Twitter-Bootstrap的方式来切换选项卡：

$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab

或者

$('#notify').tab('show'); // show notification tab

- Assem

---

我已经将它添加到按钮上，但它只能改变当前选项卡而不能更改选项卡内容：<li><a id="emailNotify" onclick="$('#notify').tab('show');">更改电子邮件通知</a></li> - Farjad Hasan

请使用以下代码来生成“更改电子邮件通知”链接：<li><a href="#notify" data-toggle='tab' >更改电子邮件通知</a></li>。但是，对于“编辑详细信息”按钮，请使用以下代码：$('#myacc').tab('show'); - Assem

抱歉问一些愚蠢的细节。基本上，我想在单击“编辑详细信息”按钮时将活动选项卡和内容更改为“通知”选项卡。我已经在“编辑详细信息”按钮上添加了 onclick="$('#notify').tab('show');"。但这只会更改活动选项卡的选择，而不会更改选项卡内容。 - Farjad Hasan

你应该在 #notify 定义中使用 href 或 data-target 来定义选项卡内容，例如 <li><a href="#content_notify">Profile</a></li> ，其中 content_notify 是内容的 id。 - Assem