-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