《 CSS＋js切换DIV选项卡代码 》

这个例子中，我们有三个导航按钮和三个内容区域。点击一个导航按钮会隐藏所有内容区域，并只显示被点击的内容区域。这是通过JavaScript函数showDiv实现的，该函数根据传入的divId来显示和隐藏对应的内容区域。没有被选中的标记，要自己写，我尽量不用js，为啥…因为不懂，不熟……
html代码：

<div class="container">
  <div class="tab" onclick="showDiv('tab1')">Tab 1</div>
  <div class="tab" onclick="showDiv('tab2')">Tab 2</div>
  <div class="tab" onclick="showDiv('tab3')">Tab 3</div>
 <!--<button>也可以在文字两边放这个按钮标签</button>-->
  <div id="tab1" class="content">
    <h2>Tab 1</h2>
    <p>Content for tab 1...</p>
  </div>
 
  <div id="tab2" class="content" style="display:none;">
    <h2>Tab 2</h2>
    <p>Content for tab 2...</p>
  </div>
 
  <div id="tab3" class="content" style="display:none;">
    <h2>Tab 3</h2>
    <p>Content for tab 3...</p>
  </div>
</div>

CSS代码：

.container {
  display: inline-block;
  justify-content: space-around;
}
 
.tab {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  display: inline-block;
}
 
.content {
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 10px;
}

外加一个可选的CSS，放不放无所谓：

.tab:hover {
  background-color: #3498db; /* 鼠标按下时的背景色 */
}
.tab:active {
  text-decoration: underline; /* 当按钮被选中时显示下划线 */
}

JavaScript代码：

function showDiv(divId) {
  // Hide all tabs
  document.querySelectorAll('.content').forEach(function(tab) {
    tab.style.display = 'none';
  });
 
  // Show the selected tab
  document.getElementById(divId).style.display = 'block';
}