web开发之Tab页的常见实现方法

tab和内容分离

• 布局:

  用一个大的container div容器包裹住tab-control和tab-content两个div块

  1. 给每一个tab-control的项(a标签的href属性)设置锚点
  2. 给每一个tab-content的项,设置id属性 id属性名需与上述锚点一一对应

    <div class="container"> 
        <div class="tab-control"> 
            <ul> 
                <li><a rel="nofollow" href="#item1">天猫超市</a></li> 
                <li><a rel="nofollow" href="#item2">天猫生鲜</a></li> 
                <li><a rel="nofollow" href="#item3">天猫电器</a></li> 
                <li><a rel="nofollow" href="#item4">天猫家具</a></li> 
            </ul> 
        </div>
        <div class="tab-content"> 
            <div id="item1" class="item">天猫超市内容</div> 
            <div id="item2" class="item">天猫生鲜内容</div> 
            <div id="item3" class="item">天猫电器内容</div> 
            <div id="item4" class="item">天猫家具内容</div> 
        </div> 
    </div>

• 样式：

锚点实现：

ul,li{ margin:0; padding:0; list-style:none;}
        .container{ width: