我正在按照本教程制作可点击的标签https://www.w3schools.com/howto/howto_js_tabs.asp 制作水平和垂直的。 我想让两个按钮同时处于活动状态。例如，如果任何水平按钮处于活动状态（数字小于6），则第一个垂直按钮（编号6）处于活动状态，并且相反。如果第6个活动也比第一个水平按钮有效。我尝试添加类似的类，但之后的活动类无法删除：
tablinks[6].className = tablinks[6].className.replace("", " active");
我怎样才能实现这一目标？
这是完整的代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Main</title>
<style>
/* Style the tab */
div.tab {
overflow: hidden;
margin-top: 4%;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* Style the bar content */
body {margin:0}
#bar {
position: absolute;
padding-top: 3cm;
}
.icon-bar {
width: 40px;
}
div.icon-bar button {
background-color: #f1f1f1;
float: left;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
font-size: 15px;
}
div.icon-bar button.active {
background-color: steelblue !important;
color: white;
}
i{
width: 20px;
background-color: inherit;
padding: 15px;
color: black;
font-size: 25px;
}
</style>
<script>
function openCity(evt, cityName, numero) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
if(numero <6){
//no idea what to do here
}
console.log(document.getElementById("wiki").classList);
console.log(tablinks);
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'trends', 0);">Google Trends</button>
<button class="tablinks" onclick="openCity(event, 'youtube', 1);">YouTube</button>
<button class="tablinks" onclick="openCity(event, 'books_ah', 2);">OL Books(A&H)</button>
<button class="tablinks" onclick="openCity(event, 'books_all', 3);">OL Books All</button>
<button class="tablinks" onclick="openCity(event, 'wos_all', 4);">WoS(all)</button>
<button class="tablinks" onclick="openCity(event, 'wos_ah', 5);">WoS(A&H)</button>
</div>
<div id = "bar">
<div class="icon-bar">
<button class="tablinks" onclick="openCity(event, 'wiki', 6);"><i class="fa fa-wikipedia-w"></i></button>
<button class="tablinks" onclick="openCity(event, 'youtube_table', 7);"><i class="fa fa-youtube-play"></i></button>
<button class="tablinks" onclick="openCity(event, 'books_table', 8);"><i class="fa fa-book"></i></button>
<button class="tablinks" onclick="openCity(event, 'method', 9);"><i class="fa fa-calculator"></i></button>
<button class="tablinks" onclick="openCity(event, 'dataset', 10);"><i class="fa fa-database"></i></button>
<button class="tablinks" onclick="openCity(event, 'about', 11);"><i class="fa fa-info-circle"></i></button>
</div>
</div>
<div id="trends" class="tabcontent">
<object data="./images/Trends.html" width="1200" height="900">Warning: Trends.html could not be included!</object>
</div>
<div id="youtube" class="tabcontent">
<object data="./images/Youtube.html" width="1200" height="900">Warning: Youtube.html could not be included!</object>
</div>
<div id="books_ah" class="tabcontent">
<object data="./images/OLbooks.html" width="1200" height="900">Warning: OLbooks.html could not be included!</object>
</div>
<div id="books_all" class="tabcontent">
<object data="./images/OLbooks_all.html" width="1200" height="900">Warning: OLbooks_all.html could not be included!</object>
</div>
<div id="wos_ah" class="tabcontent">
<object data="./images/Wos_AH.html" width="1200" height="900">Warning: wos_ah.html could not be included!</object>
</div>
<div id="wos_all" class="tabcontent">
<object data="./images/Wos_all.html" width="1200" height="900">Warning: wos_all.html could not be included!</object>
</div>
<div id="wiki" class="tabcontent">
<object data="./images/Trends.html" width="1200" height="900">Warning: Trends.html could not be included!</object>
</div>
<div id="youtube_table" class="tabcontent">
<object data="./images/table2.html" width="1200" height="900">Warning: table2.html could not be included!</object>
</div>
<div id="books_table" class="tabcontent">
<object data="./images/table3.html" width="1200" height="900">Warning: table3.html could not be included!</object>
</div>
<div id="method" class="tabcontent">
<object data="./images/methodology.html" width="1200" height="900">Warning: methodology.html could not be included!</object>
</div>
<div id="dataset" class="tabcontent">
<object data="./images/dataset.html" width="1200" height="900">Warning: dataset.html could not be included!</object>
</div>
<div id="about" class="tabcontent">
<object data="./images/about.html" width="1200" height="900">Warning: about.html could not be included!</object>
</div>
<script>document.getElementsByClassName('tablinks')[0].click()</script>
</body>
</html>
答案 0 :(得分：1)
如果我没弄错的话，你试图突出显示所有活动垂直按钮的第一个水平按钮和所有活动水平按钮的第一个垂直按钮。如果是这样，这应该可以解决问题。
if(numero <6){
tablinks[6].classList.add('active');
} else {
tablinks[0].classList.add('active');
}