朋友们，我发现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>
我希望这两个标签面板不仅可以一次正常工作
答案 0 :(得分：1)
function openCity(evt, cityName) {
var i, tablinks;
$(this).parents().children('.tablinks').removeClass('active');
$(this).addClass('active');
$('#'+cityName).parents('.tab-container').children('.tabcontent').removeClass('active');
$('#'+cityName).addClass('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, .tablinks.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent.active{
display:block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks active" 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 class="tab-container">
<div id="London" class="tabcontent active">
<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>
</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 active" 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 class="tab-container">
<div id="Delhi" class="tabcontent active">
<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>
</div>
使用jquery可以使用此方法
答案 1 :(得分：1)
为标签内容添加了另一个特定类， 为函数添加了另一个构造函数，并隐藏了仅单击选项卡面板的选项卡，而不是html的所有选项卡面板。
function openCity(evt, cityName, tabContent, tabContentLink) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(tabContent);
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName(tabContentLink);
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 tabcontent-link-1" onclick="openCity(event, 'London', 'tabcontent-1', 'tabcontent-link-1')" id="defaultOpen">London</a></li>
<li><a href="javascript:void(0)" class="tablinks tabcontent-link-1" onclick="openCity(event, 'Paris', 'tabcontent-1', 'tabcontent-link-1')">Paris</a></li>
<li><a href="javascript:void(0)" class="tablinks tabcontent-link-1" onclick="openCity(event, 'Tokyo', 'tabcontent-1', 'tabcontent-link-1')">Tokyo</a></li>
</ul>
<div id="London" class="tabcontent tabcontent-1">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent tabcontent-1">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent tabcontent-1">
<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 tabcontent-link-2" onclick="openCity(event, 'Delhi','tabcontent-2', 'tabcontent-link-2')" id="defaultOpen">Delhi</a></li>
<li><a href="javascript:void(0)" class="tablinks tabcontent-link-2" onclick="openCity(event, 'NewYork', 'tabcontent-2', 'tabcontent-link-2')">New York</a></li>
</ul>
<div id="Delhi" class="tabcontent tabcontent-2" style="display:block;">
<h3>OrderDelivered</h3>
<p>Delhi is the capital of India.</p>
</div>
<div id="NewYork" class="tabcontent tabcontent-2">
<h3>OrderFailed</h3>
<p>New York is the city of America.</p>
</div>
</div>
</div>
</div>
更新（固定菜单标签突出显示问题）