引導標籤 - 點兩個標籤同時

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home" onclick="location.href='#home1'">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1" onclick="location.href='#menu11'">Menu 1</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
</div> 

<hr /> 

<div class="tab-content"> 
    <div id="home1" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu11" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
</div>

和JS

$('.nav-tabs a').click(function(){ 
    $(this).tab('show'); 
})

如何讓它以這種方式工作，點擊一個鏈接後 - 兩個DIVS的內容會發生變化？我正在尋找信息如何不指向ID，但是沒有成功。

來源

2015-09-28 Julia Galden

我創建了一個jsfiddle http://jsfiddle.net/an0r4buk/1/來展示您試圖實現的目標。

$('.nav-tabs a').click(function() { 
    $(this).tab('show'); 
    $("<a>").data("target", $(this).data("second-tab")).tab("show") 
})

引導切換一個標籤的時間，這就是爲什麼我創建了一個新的定位元素，設置它的目標，你要顯示的第二個選項卡。

我修改你的HTML這樣的：

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home" data-second-tab="#home1">Home</a> 
    </li> 
    <li><a data-toggle="tab" href="#menu1" data-second-tab="#menu11">Menu 1</a> 
    </li> 
</ul>

的href屬性用於第一個選項卡（主/和home1），該data-second-tab切換第二個選項卡。

來源

2015-09-28 08:08:45

謝謝！這是我需要的！ –

沒問題。不要忘記標記一個被接受的問題。 –

試試這個http://jsfiddle.net/serGlazkov/an0r4buk/2/

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var $previousActiveTab = $(e.relatedTarget); 
    var $newlyActiveTab = $(e.target); 
    var other = $previousActiveTab.attr('href') + '1'; 
    var other1 = $newlyActiveTab.attr('href') + '1'; 
    $(other).removeClass('active in'); 
    $(other1).addClass('active in'); 
})

來源

2015-09-28 08:11:59 sglazkov

太複雜了。它可能在這種特殊情況下工作，但是imo OP不會堅持'home' /'home1'。 –

我同意，你的方式更好 – sglazkov

選擇第二個div.tab-content與id="tab-content2"然後將以下代碼就可以了：

$('.nav-tabs a').click(function(){ 
    $(this).tab('show') 
    var name = $(this).attr('href').substr(1) 
    $('#tab-content2').children().each(function(el) { 
    if (name + '1' === $(this).attr('id')) { 
     $(this).addClass('active') 
    } else { 
     $(this).removeClass('active') 
    } 
    }) 
})

來源

2015-09-28 08:18:47 dimakura

引導標籤 - 點兩個標籤同時

回答

相關問題