URL锚链锚点定位和overflow的选项卡切换效果实例页面

展示

代码

• HTML：

  <div class="box">
      <div class="list" id="one">1</div>
      <div class="list" id="two">2</div>
      <div class="list" id="three">3</div>
      <div class="list" id="four">4</div>
  </div>
  <div class="link">
      <a class="click" href="#one">1</a>
      <a class="click" href="#two">2</a>
      <a class="click" href="#three">3</a>
      <a class="click" href="#four">4</a>
  </div>

• 核心CSS：

  .box {
      width: 20em;
      height: 10em;
      border: 1px solid #ddd;
      overflow: hidden;
  }
  .list {
      line-height: 10em;
      background: #ddd;
      text-align: center;
  }