Bootstrap links in tabs not working

Question

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.

Here is the site: http://www.rightcall.co/features. Look at the links in the last 3 tabs

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.

Obviously I left out all of the parts of the page that didn't seem directly relevant, so let me know if I can provide any additional info. — Sam G-H, Jul 12 '13 at 17:24

score 7 · Accepted Answer · answered Jul 12 '13 at 17:29

7

In your javascript you select all '.tabbable a''s with jquery and prevent the default click action:

$('.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..

Also I should point out that linking your site in StackOverflow to let people look into your bug/problem is against the rules. Only post the code (HTML/CSS/JS) so that others finding the question can solve their problems with it too.

answered Jul 12 '13 at 17:29

Tim Baas

6,035
5
45
72

1

Thanks for the advice. And sorry about the linking thing, I just thought it would be helpful. Ultimately, I just added `$('.tabbable .tab-pane a').unbind();` to my js, which did the trick so I didn't have to edit bootstrap.js at all. – Sam G-H Jul 12 '13 at 18:07
1

Glad to be of help. The code needed to be changed is at the bottom of the `features` page, so you should be able to update it their. It's just beneath the Google Analytics script. Don't think you need to change bootstrap for it. – Tim Baas Jul 12 '13 at 20:12

Bootstrap links in tabs not working

1 Answers1

Linked