1

Twitter Bootstrap で 3 つのタブを作成しようとしていますが、各タブ内には異なるスライドショーがあります。現時点では、最初のスライドショーが再生されますが、他のスライドショーは機能しません。これは、2 つのコンテンツの競合とコンテンツの非表示に関係していることに気付きました。同様の投稿を見たことがありますが、解決策が見つかりません。機能させるための助けをいただければ幸いです。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#industrial">Industrial</a></li>
    <li><a href="#digital-tech">Digital/Tech</a></li>
    <li><a href="#finance-professional">Finance/Professional</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="industrial">
        <div id="myCarousel1" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=1a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=1b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=1c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>

    <div class="tab-pane" id="digital-tech">
        <div id="myCarousel2" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=2a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=2b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=2c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <div class="tab-pane" id="finance-professional">
        <div id="myCarousel3" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=3a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=3b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=3c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>        
        </div>
    </div>
</div>
4

1 に答える 1

1

<li> <a>次のようなタグ に data-toggle="tab" を追加する必要があると思います 

<li><a data-toggle="tab" href="#digital-tech">Digital/Tech</a></li>

タブとスライダーが機能します

于 2014-06-19T15:36:51.360 に答える