Bootstrap选项卡，不允许单击

Question

我正在使用bootstrap 3选项卡创建一个步骤向导，如下图所示。

我试图通过不允许直接单击选项卡来控制它，但只允许您使用下一个/上一个按钮。

我遇到的问题是为了通过按钮以编程方式控制选项卡，即使您执行索引值，每个上面的链接都需要一个href值;你不能把href留空。

$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

如何使用我的按钮控制导航但不允许您单击选项卡？

Answer 1

$('#myTab li:eq(2) a').click(function(e){
    e.preventDefault();
});

建立你的链接

<a href="#"></a>

目前还不确定为什么要使用不可点击的链接。但这就是解决方案。

请注意，您可能只想更改查询以执行此操作。

$('#myTab li a').click(function(e){
    e.preventDefault();
});

记下马丁的记录，我们可以杀死所有事件和传播。

$('#myTab li a').click(function(e){
    return false;
});

Chris Coyer对此有更详细的帖子：http://css-tricks.com/return-false-and-prevent-default/

您应该考虑更改代码而不是使用jQuery来破解它。您可以将选项卡设置为常规列表项并为活动列表项着色。 prev和next按钮应该引导用户访问其s​​eq中的下一个选项卡。您可以使用浏览器网址或页面变量，这样您就可以知道用户当前所处位于标签式处理过程中的位置。