0

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

我有标签导航来浏览不同的视图，并且在每个视图中我都有一个轮播。为了使旋转木马工作，我必须从 Twitter 添加 Jquery.js 文件。但是自从我添加它之后，可标签导航不再起作用。我的意思是当我的指针在选项卡上时有一个结束，但是当我点击它时，什么也没有发生。

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

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

你知道它会是什么吗？

4

1 回答 1

0

由于使用preventDefault()了引导选项卡，锚元素的默认行为没有被执行。

您也许可以删除元素data-toggle="tab"上的属性.nav-tabs a，它会正常工作。

如果这不起作用，您需要让它们再次充当链接；这可以通过使用以下代码来完成：

$('.nav-tabs a')
    .filter('[href]').click(function(){
        window.location.href = $(this).attr('href');
    });
于 2013-04-16T17:31:34.213 回答