同じIDを共有する複数のタブストラップを作成する方法

Question

最初に、同じIDのインスタンスが複数存在すべきではないことを理解していますが、私の要件を満たすのに役立つより優れたソリューションを探しています。ここで

<div class="tab-group-1"> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a href="#abc1" data-toggle="tab">Home</a></li> 
    <li><a href="#abc2" data-toggle="tab">About</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div class="tab-pane active" id="abc1">Home tab content</div> 
    <div class="tab-pane" id="abc2">About tab content</div> 
    </div> 
</div> 


<div class="tab-group-2"> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a href="#abc1" data-toggle="tab">Home</a></li> 
    <li><a href="#abc2" data-toggle="tab">About</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div class="tab-pane active" id="abc1">Home tab content</div> 
    <div class="tab-pane" id="abc2">About tab content</div> 
    </div> 
</div> 

Answer 1

は何かですが、小さな変化があります：以下は、私が何をしようとしています何のほんの一例です

Bootply：http://www.bootply.com/U0LkomjCne

をを説明：a[data-target]でa[href]を変更ターゲットにラッパークラスの接頭辞を付けます。

HTML：

<div class="tab-group-1"> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a data-target=".tab-group-1 #abc1" data-toggle="tab">Home</a></li> 
    <li><a data-target=".tab-group-1 #abc2" data-toggle="tab">About</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="abc1">Home tab content</div> 
    <div class="tab-pane" id="abc2">About tab content</div> 
    </div> 
</div> 

<div class="tab-group-2"> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a data-target=".tab-group-2 #abc1" data-toggle="tab">Home</a></li> 
    <li><a data-target=".tab-group-2 #abc2" data-toggle="tab">About</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div class="tab-pane active" id="abc1">Home tab content</div> 
    <div class="tab-pane" id="abc2">About tab content</div> 
    </div> 
</div>