页面上的多个选项卡- HTML CSS

<ul class="tab">
  <li id="tab1">选项1</li>
  <li id="tab2">选项2</li>
  <li id="tab3">选项3</li>
</ul>

<div id="content1">内容1</div>
<div id="content2">内容2</div>
<div id="content3">内容3</div>

.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab li {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.tab li:hover {
  background-color: #ccc;
}

.tab li.active {
  background-color: #fff;
  border-bottom: 2px solid #000;
}

#content1,
#content2,
#content3 {
  display: none;
  padding: 10px;
  border: 1px solid #000;
}

#content1.show,
#content2.show,
#content3.show {
  display: block;
}

var tabs = document.getElementsByClassName('tab')[0].getElementsByTagName('li');
var contents = document.getElementsByTagName('div');

for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    var tabId = this.id.slice(3); // 获取标签的ID，如"tab1" -> "1"

    // 隐藏所有内容面板
    for (var j = 0; j < contents.length; j++) {
      contents[j].classList.remove('show');
    }

    // 显示对应的内容面板
    document.getElementById('content' + tabId).classList.add('show');

    // 切换选项卡的样式
    for (var k = 0; k < tabs.length; k++) {
      tabs[k].classList.remove('active');
    }
    this.classList.add('active');
  });
}