タブクリック切り替えのJavaScript実装コード共有例（画像とテキスト）

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p style="display:block;">第一个Nian糕</p>
<p>第二个Nian糕</p>
<p>第三个Nian糕</p>

p {
 display: none;
 width: 155px;
 height: 100px;
 border: 1px solid #000;
}

//第一个按钮的点击事件
btnList[0].onclick = function () {
 btnList[0].style.color = "#fff";
 btnList[0].style.backgroundColor = "#f60";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";
 pList[0].style.display = "block";    
 pList[1].style.display = "none";    
 pList[2].style.display = "none";    
}

//第二个按钮的点击事件
btnList[1].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "#fff";
 btnList[1].style.backgroundColor = "#f60";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";  
 pList[0].style.display = "none";    
 pList[1].style.display = "block";    
}

//第三个按钮的点击事件
btnList[2].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "#fff";
 btnList[2].style.backgroundColor = "#f60";
 pList[0].style.display = "none";    
 pList[1].style.display = "none";    
 pList[2].style.display = "block";  
}

for(var i = 0; i < btnList.length; i++ ) {
 btnList[i].index = i; //给每个按钮添加index属性，标记是第几个按钮
 btnList[i].onclick = function() {
  for(var j = 0; j < btnList.length; j++) {
   //将所有的按钮样式去掉，块隐藏
   btnList[j].style.color = "";
   btnList[j].style.backgroundColor = "";
   pList[j].style.display = "none";
  }
  //给点击的按钮添加样式，对应的块显示
  this.style.color = "#fff";
  this.style.backgroundColor = "#f60";
  pList[this.index].style.display = "block";
 }
}

for(let i = 0; i < btnLists.length; i++) {
 btnLists[i].onclick = function() {
  for(var j = 0;j < btnLists.length;j++){
   btnLists[j].style.color="";
   btnLists[j].style.backgroundColor="";
   pLists[j].style.display="none";
  }
  this.style.color = "yellow";
  this.style.backgroundColor="#f60";
  pLists[i].style.display="block";
 }
}