Bootstrap选项卡不会停用

时间:2016-09-05 18:36:44

标签: javascript twitter-bootstrap bootstrap-tabs

我正在使用Bootstrap中的tabs组件,它似乎工作正常,但是当我转到选项卡然后离开它时,该选项卡会保留活动类。因此,当我经历所有这些时,它们将无法工作。这是我的代码(我正在使用Django)

<ul id="question-tabs" class="nav nav-tabs nav-justified" role="tablist" data-tabs="question-tabs">
    <li role="presentation" class="active"><a href="#latest" data-toggle="tab">Latest</a></li>
    <li role="presentation"><a href="#unans" data-toggle="tab">Unanswered <span class="badge">{{ total_noans }}</span></a></li>
    <li role="presentation"><a href="#reward" data-toggle="tab">Most Rewarding <span class="badge">{{ reward | length }}</span></a></li>
</ul>

我没有发现问题,我尝试使用JS代码段Bootstrap提供...

$('#question-tabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

......但它不起作用。这可能是一个愚蠢的事情,但我无法弄清楚。我感谢任何帮助。

如果您想要一个我所说内容的实例,请转到https://seoq.swapps.io/qa/

2 个答案:

答案 0 :(得分:0)

只需在特定于页面的(project.js)脚本中包装这样的代码即可。我希望这能解决问题:

$(function(){
  $('#question-tabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  });
});

享受:)

答案 1 :(得分:0)

是的,这是一件很傻的事。在基本模板中,正在调用的Bootstrap.js文件是版本4的文件。现在它可以工作。对不起,谢谢大家。