0

Web サイトで作業していて、Twitter BootStrap で問題が発生しました。

さまざまなビューをナビゲートするためのタブ可能なナビゲーションがあり、各ビューにはカルーセルがあります。カルーセルを機能させるには、Twitter から Jquery.js ファイルを追加する必要がありました。しかし、追加して以来、タブ可能なナビゲーションは機能しなくなりました。つまり、ポインターがタブ上にあるときにオーバーがありますが、クリックしても何も起こりません。

jquery.js と Twitter BootStrap のタブ可能なナビゲーションの間に競合があるのか​​、それとも私が何か間違ったことをしたのかはわかりません。だからここに私のコード：

    <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()Bootstrap タブを使用しているため、アンカー要素のデフォルトの動作は実行されません。

要素の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 に答える