:target伪类实现选项卡切换效果实例页面

展示

代码

• HTML：

  <div class="cs-tab-x">
      <i id="tabPanel2" class="cs-tab-anchor-2" hidden></i>
      <i id="tabPanel3" class="cs-tab-anchor-3" hidden></i>
      <div class="cs-tab">
          <a href="#tabPanel1" class="cs-tab-li">选项卡1</a>
          <a href="#tabPanel2" class="cs-tab-li">选项卡2</a>
          <a href="#tabPanel3" class="cs-tab-li">选项卡3</a>
      </div>
      <div class="cs-panel">        
          <div class="cs-panel-li">面板内容1</div>
          <div class="cs-panel-li">面板内容2</div>
          <div class="cs-panel-li">面板内容3</div>
      </div>
  </div>

• CSS：

  .cs-tab-li {
      display: inline-block;
      background-color: #f0f0f0;
      color: #333;
      padding: 5px 10px;
  }
  .cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-tab .cs-tab-li:first-child,
  .cs-tab-anchor-2:target ~ .cs-tab .cs-tab-li:nth-of-type(2),
  .cs-tab-anchor-3:target ~ .cs-tab .cs-tab-li:nth-of-type(3) {
      background-color: deepskyblue;
      color: #fff;
  }
  .cs-panel-li {
      display: none;
      padding: 20px;
      border: 1px solid #ccc;
  }
  .cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-panel .cs-panel-li:first-child,
  .cs-tab-anchor-2:target ~ .cs-panel .cs-panel-li:nth-of-type(2),
  .cs-tab-anchor-3:target ~ .cs-panel .cs-panel-li:nth-of-type(3) {
      display: block;
  }