使用href自定义选项卡视图的代码

<div class="tab-container">
  <a href="#tab1" class="tab">Tab 1</a>
  <a href="#tab2" class="tab">Tab 2</a>
  <a href="#tab3" class="tab">Tab 3</a>

  <div id="tab1" class="tab-content">
    <h2>Tab 1 Content</h2>
    <p>This is the content for Tab 1.</p>
  </div>

  <div id="tab2" class="tab-content">
    <h2>Tab 2 Content</h2>
    <p>This is the content for Tab 2.</p>
  </div>

  <div id="tab3" class="tab-content">
    <h2>Tab 3 Content</h2>
    <p>This is the content for Tab 3.</p>
  </div>
</div>

.tab-container {
  width: 100%;
}

.tab {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

.tab-content {
  display: none;
}

.tab-content:target {
  display: block;
}