부트 스트랩을 만드는 방법 동일한 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[href]a[data-target]로를 타겟에 래퍼 클래스를 접두사로 붙이십시오.

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>