Question

我正在网站上工作，我遇到了Twitter BootStrap的问题。

我有可用的导航来浏览不同的视图，在每个视图中我都有一个旋转木马。为了使轮播工作，我不得不从Twitter添加Jquery.js文件。但是自从我添加它以来，可能的导航系统不再起作用了。我的意思是当我的指针在标签上时有一个结束，但当我点击它时，没有任何反应。

我不知道来自Twitter BootStrap的jquery.js和tabbable导航之间是否存在冲突，或者我是否做错了什么。所以这里是我的代码：

    <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>

你知道它会是什么吗？

Answer 1

由于使用了preventDefault() w / Bootstrap选项卡，因此未执行锚元素的默认行为。

您可以移除data-toggle="tab"元素上的.nav-tabs a属性，它将正常运行。

如果这不起作用，你需要让它们再次作为链接起作用;可以使用以下代码完成：

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

Jquery.js从Bootstrap中取消激活tabbable导航

1 个答案: