编辑：

Question

我正在使用引导标签，并且我使用shown事件来检测标签更改，在我要取消显示的方案中，即使如此，我使用preventDefault()函数如下：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href") // activated tab
    if(target === '#mise-en-page' || target === '#widgets'){
        if($('.page-name-input').length > 0){
            var nonEmpty = $('.page-name-input').filter(function(){
                return this.value != '';
            });
            if(nonEmpty.length==0){
                e.preventDefault();
                console.log('Error !!');
            }else{
                console.log('OK');
            }
        }else{
            console.log('OK');
        }
    };
  });

在这种情况下，preventDefault()功能不起作用，即使我在控制台上打印了'Error !!'消息，我仍然可以在标签之间导航。

我该如何解决这个问题？

编辑：

这是一个jsfiddle，其中preventDefault()不适用于显示的事件。

http://jsfiddle.net/xFW8t/2426/

Answer 1

显示选项卡后，将显示

shown.bs.tab。为了避免默认行为，您应该听上一步，请尝试这样：

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    //your stuff
});

虽然我不确定您是否能够阻止自定义库的默认行为。 PreventDefault旨在用于语言的默认行为而非自定义行为。

Answer 2

它正在发生，因为小提琴没有正确包含bootstrap.js

当包含js时，e.preventDefault工作正常..

http://www.codeply.com/go/FiyO9EGNC0（css，js＆amp; jquery全包括w / Codeply）

由于数据属性，标签仍然无法使用js，但这些事件无法使用bootstrap.js

Updated fiddle

取消引导选项卡的show事件

编辑：

2 个答案: