<div class="bar-block">
<div class="container">
<h5>選單</h5>
</div>
<a href="javascript:void(0)" class="bar-item button tablink testbtn" onclick="openClass(event, 'class1')">教學1</a>
<a href="javascript:void(0)" class="bar-item button tablink" onclick="openClass(event, 'class2')">教學2</a>
<a href="javascript:void(0)" class="bar-item button tablink" onclick="openClass(event, 'class3')">教學3</a>
<a href="javascript:void(0)" class="bar-item button tablink" onclick="openClass(event, 'class4')">教學4</a>
</div>
</div>
<div id="class1" class="container class">
教學1內容
教學1內容
教學1內容
</div>
<div id="class2" class="container class">
教學2內容
教學2內容
教學2內容
</div>
<div id="class3" class="container class">
教學3內容
教學3內容
教學3內容
</div>
<div id="class4" class="container class">
教學4內容
教學4內容
教學4內容
</div>
.button{
background:#ccc;
padding:10px;
color:#000;
display: inline-block;
}
.bar-block{
margin-bottom:20px;
}
.red{
background: red!important;
color:#fff!important;
}
function openClass(evt, className) {
var i, x, tablinks;
x = document.getElementsByClassName("class");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].classList.remove("red");
}
document.getElementById(className).style.display = "block";
evt.currentTarget.classList.add("red");
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.