简体   繁体   English

选项卡中的Bootstrap链接不起作用

[英]Bootstrap links in tabs not working

I have tabs set up on my website and they all seem to be working fine except that the links inside the tabs do not work. 我在我的网站上设置了标签,它们似乎都工作正常,但标签内的链接不起作用。 It works if I right-click and say open in new tab, but otherwise nothing happens. 如果我右键单击并在新选项卡中打开,它可以工作,但否则没有任何反应。 I think the issue is with bootstrap.js and something that I'm doing, but I can't figure out what. 我认为问题出在bootstrap.js和我正在做的事情上,但我无法弄清楚是什么。

Here is the site: http://www.rightcall.co/features . 这是网站: http//www.rightcall.co/features Look at the links in the last 3 tabs 查看最后3个选项卡中的链接

Here is a simple version of my code: 这是我的代码的简单版本:

<div class="tabbable features tabs-left row-fluid">
    <ul class="nav nav-tabs span3 uppercase">
        <li class="active"><a href="#l1" data-toggle="tab">Overview</a></li>
            <li><a href="#l2" data-toggle="tab">What you get</a></li>
            <li><a href="#l3" data-toggle="tab">Our Process</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="l1">
                <h3>Overview</h3>
                <a href="/anotherpage">         
            </div>
            <div class="tab-pane" id="l2">
                <h3>What You Get</h3>
                <a href="/anotherpage">
            </div>
            <div class="tab-pane" id="l3">
                <h3>Our Process</h3>
                <a href="/anotherpage">
            </div>
        </div>
    </div>
</div>

Thank you in advance for any advice you have. 如果您有任何建议,请提前感谢您。 I'm pretty new to Bootstrap, so I'm kinda at a loss. 我对Bootstrap很新,所以我有点不知所措。

In your javascript you select all '.tabbable a' 's with jquery and prevent the default click action: 在你的javascript中你用jquery选择所有'.tabbable a'并阻止默认的点击动作:

$('.tabbable a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

You should make it: 您应该做到:

$('.tabbable .nav-tabs a').click( //etc..

This way no other a 's are selected by jQuery.. 这样jQuery就没有选择其他的a

Also I should point out that linking your site in StackOverflow to let people look into your bug/problem is against the rules. 另外我应该指出,在StackOverflow中链接您的网站以让人们查看您的错误/问题是违反规则的。 Only post the code (HTML/CSS/JS) so that others finding the question can solve their problems with it too. 只发布代码(HTML / CSS / JS),以便其他人找到问题也可以解决他们的问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM