使用一個導航標簽控制多個標簽內容
[英]Control multiple tab-contents with one nav-tabs
問題描述
我有一個常規的Twitter Bootstrap 3標簽。 我要做的是控制 控制多個
帶有一個nav-tabs元素的tab-content容器。
這是一個例子： jsfiddle
在這個例子中，當我更改選項卡時，只有第一個被更改。 我希望兩個容器都改變，而不僅僅是第一個。
謝謝！
4 個解決方案
解決方案1
41 已采納 2013-11-01 02:22:08
在這里我更新你的jsfiddle
我將data-target屬性添加到 a-elements 並更改第二個選項卡內容中的 id
我修改了這條線，
你的：
<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a> </li>
我的更新：
<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a> </li>
第二個標簽內容，你的：
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Content 2.</p>
</div>
</div>
我的更新：
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade in active" id="home_else">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile_else">
<p>Content 2.</p>
</div>
</div>
解決方案2
17 2014-06-20 10:09:26
你應該只使用一個類。 我只是在模態窗口中處理 Bootstrap 3 選項卡式內容。 試圖讓模態窗口打開到正確的選項卡，但我需要打開兩個選項卡，一個用於模態標題，一個用於內容，頁腳中有額外的 nab 選項卡。
我使用了一個類並且它起作用了。 因此，將<div class="tab-pane fade in active" id="home">更改為<div class="tab-pane fade in active home">和<a href="#home" data-toggle="tab">到<a href=".home" data-toggle="tab"> ... 為我工作。
解決方案3
0 2013-11-01 02:11:12
ID 必須是唯一的。
閱讀兩個具有相同 id 屬性的 HTML 元素：它到底有多糟糕？
你的代碼有問題
id 為 home 的兩個元素，profile 和 myTabContent。
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Content 2.</p>
</div>
</div>
<hr>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Content 2.</p>
</div>
</div>
並且您正在提供href="#home"它將針對具有 id 的第一個元素。並非所有具有 id 的元素。
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a></li>
</ul>
解決方案4
0 2020-10-15 14:25:34
“數據目標”不起作用 Bootstrap4。
這是 Bootstrap4 版本。
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="active"><a href="#home" data-toggle="tab" data-target="#home, #home_else" aria-selected="true" id="home_tab">Home</a></li>
<li><a href="#profile" data-toggle="tab" data-target="#profile, #profile_else" aria-selected="false" id="profile_tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab" data-target="#messages, #messages_else" aria-selected="false" id="messages_tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab" data-target="#settings, #settings_else" aria-selected="false" id="settings_tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" aria-labelledby="home_tab" role="tabpanel">...1</div>
<div class="tab-pane" id="profile" aria-labelledby="profile_tab" role="tabpanel">...2</div>
<div class="tab-pane" id="messages" aria-labelledby="messages_tab" role="tabpanel">...3</div>
<div class="tab-pane" id="settings" aria-labelledby="settings_tab" role="tabpanel">...4</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home_else" aria-labelledby="home_tab">...11</div>
<div class="tab-pane" id="profile_else" aria-labelledby="profile_tab">...22</div>
<div class="tab-pane" id="messages_else" aria-labelledby="messages_tab">...33</div>
<div class="tab-pane" id="settings_else" aria-labelledby="settings_tab">...44</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activated_tab = e.target // activated tab
var previous_tab = e.relatedTarget // previous tab
if(activated_tab.id === 'home_tab') {
$('#home_else').css('display', 'block');
$('#profile_else').css('display', 'none');
$('#messages_else').css('display', 'none');
$('#settings_else').css('display', 'none');
};
if(activated_tab.id === 'profile_tab') {
$('#home_else').css('display', 'none');
$('#profile_else').css('display', 'block');
$('#messages_else').css('display', 'none');
$('#settings_else').css('display', 'none');
}
if(activated_tab.id === 'messages_tab') {
$('#home_else').css('display', 'none');
$('#profile_else').css('display', 'none');
$('#messages_else').css('display', 'block');
$('#settings_else').css('display', 'none');
}
if(activated_tab.id === 'settings_tab') {
$('#home_else').css('display', 'none');
$('#profile_else').css('display', 'none');
$('#messages_else').css('display', 'none');
$('#settings_else').css('display', 'block');
}
// 処理,,,,,
});
</script>
</body>
</html>
使用Bootstrap的nav-tabs從另一個選項卡跳轉到特定選項卡
[英]Jump to specific tab from another tab with Bootstrap's nav-tabs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.