0
클릭 할 수있는 탭을 만들기 위해이 튜토리얼을 수행했습니다. https://www.w3schools.com/howto/howto_js_tabs.asp 수평 및 수직으로 만듭니다. 두 단추를 동시에 활성화하고 싶습니다. 예를 들어 수평 버튼이 활성화 된 경우 (6보다 작은 숫자) 첫 번째 수직 버튼 (숫자 6)이 활성화 된 경우와 반대입니다. 첫 번째 수평 버튼보다 6 번째가 활성화 된 경우에도 활성화됩니다. 그런 클래스를 추가하려고 시도했지만 그 이후의 활성 클래스는 제거 할 수 없습니다.동시에 두 개의 HTML 버튼을 활성화하는 방법
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>
댓글에 대한 열렬한 반응으로 첫 번째 클릭에는 활성화되지만 두 번째 이후에는 다른 세로 버튼이 활성화되고 세 번째 버튼이 강조 표시 될 때까지 세 번째 버튼이 활성화됩니다. 어떻게 피하는거야? – Darius