-1
你好朋友我發現了W3標籤腳本我在我的項目中使用了它，它完美地工作在我的頁面上，但我希望在單頁中的兩個不同面板中使用此標籤，兩個標籤面板不能完美工作一個標籤面板工作罰款。以下是代碼片段如何在同一頁面上顯示標籤面板
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<br><br>
<div id="tabs">
<div class="row">
<div class="col-md-12" style="padding:0px;">
<ul class="tab modal-tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Delhi')" id="defaultOpen">Delhi</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'NewYork')">New York</a></li>
</ul>
<div id="Delhi" class="tabcontent" style="display:block;">
<h3>OrderDelivered</h3>
<p>Delhi is the capital of India.</p>
</div>
<div id="NewYork" class="tabcontent">
<h3>OrderFailed</h3>
<p>New York is the city of America.</p>
</div>
</div>
</div>
</div>我想在一個時間片的兩個這個面板做工精細，不僅一個
兩個選項卡工作完美犯規我的網頁上一次在一個標籤面板罰款不只有一個:) – Banzay
你正在嘗試實現？ – vel
因爲你看我的代碼片段只有一個選項卡面板的作品像第一個面板是倫敦，巴黎，東京和第二面板是德里或紐約如果點擊德里這是第二個選項卡面板它顯示德里選項卡的內容，但隱藏一些選項卡的內容或如果我點擊任何第一個標籤內容是倫敦，巴黎或托克伊然後我的第二個標籤內容隱藏，我希望這兩個面板在同一時間完美工作。 – Dami