<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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.