Jquery.js deactivate the tabbable navs from Bootstrap

Question

I am working on a website and I have encountered an issue with Twitter BootStrap.

I have tabbable navs to navigate through different views and in each view I have a carousel. To make the carousel works, I had to add the Jquery.js file from Twitter. But since I added it, the tabbable navs don't work anymore. I mean there is an over when my pointer is on the tab but when I click on it, nothing happens.

I don't know if there is a conflict between jquery.js and tabbable navs from Twitter BootStrap or if I did something wrong. So here my code:

    <head>
    <!-- JS Files -->
            <script src="bootstrap/js/jquery.js"></script>
            <script src="bootstrap/js/bootstrap.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('.carousel').carousel({
                        interval: 3000
                    });

                $('.carousel').carousel('cycle');
                });
            </script>
    </head>
    <body>

                    <div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                    <li><a href="index.php">Accueil</a></li>

                    <li><a href="index.php?page=concept">Concept</a></li>

                    <li class="active"><a href="index.php?page=collections">Collections</a></li>

                    <li><a href="index.php?page=contact">Contact</a></li>
             </ul>
        </div>
    </div>
</div>

            <ul class="breadcrumb">
                    <li><a href="index.php">Accueil</a> <span class="divider">/</span></li>
                    <li><a href="index.php?page=collections">Collections</a> <span class="divider">/</span></li>
                    <li class="active">SummerSpring - Business Line</li>
            </ul>


        <div  class="tabbable tabs-left">
            <ul class="nav nav-tabs">
                    <li class="active"><a href="index.php?page=collections/summerspring" data-toggle="tab">Business Line</a></li>
                    <li><a href="index.php?page=collections/summerspring/ligneessentielle" data-toggle="tab">Ligne Essentielle</a></li>
                    <li><a href="index.php?page=collections/summerspring/blueline" data-toggle="tab">Blue Line</a></li>
                    <li><a href="index.php?page=collections/summerspring/blacklabel" data-toggle="tab">Black Label</a></li>
                    <li><a href="index.php?page=collections/summerspring/slimfit" data-toggle="tab">Slim Fit</a></li>
                    <li><a href="index.php?page=collections/summerspring/greybygrey" data-toggle="tab">Grey By Grey</a></li>
            </ul>

        <div class="tab-content">
        <div class="tab-pane active">

        <div class="row-fluid">


            <div class="span2">
            </div>


            <div class="span8">
                <br>

            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="images/showroomspirit.jpg" alt="">
                                <div class="carousel-caption">
                                  <h4>First Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                        </div>
                        <div class="item">
                            <img src="images/showroomspirit.jpg" alt="">
                                <div class="carousel-caption">
                                  <h4>Second Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                        </div>
                        <div class="item">
                            <img src="images/showroomspirit.jpg" alt="">
                                <div class="carousel-caption">
                                  <h4>Third Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                        </div>
                    </div>
                                <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                                <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>

            </div>

            <div class="span2">
            </div>

        </div>
    </body>

Do you have any idea of what could it be?

You should format (indent) your code so that your question would be more readable and thus accessible to the audience. Any IDE should be able to do that. And welcome on StackOverflow! — skuntsel, Apr 16 '13 at 17:46

kyle.stearns · Accepted Answer · 2013-04-16T18:45:47.143

0

The default behavior of the anchor elements is not being executed due to the use of preventDefault() w/ the Bootstrap tabs.

You may be able to remove the data-toggle="tab" attribute on the .nav-tabs a elements and it will work properly.

If that does not work you need to for them to function as links once again; that can be done by using the following code:

$('.nav-tabs a')
    .filter('[href]').click(function(){
        window.location.href = $(this).attr('href');
    });

edited Apr 16 '13 at 18:45

answered Apr 16 '13 at 17:31

kyle.stearns

2,326
21
30

I tried what you've just submitted but this code is only if I want to have everything on the same page and scroll on it through anchor for each tab, this is not the goal. The goal is to have different pages, and each tab redirect to it. – TheJailbreakBay Apr 16 '13 at 17:45
I modified my original answer - hopefully that helps out! – kyle.stearns Apr 16 '13 at 18:28

Jquery.js deactivate the tabbable navs from Bootstrap

1 Answers1