选项卡的基本布局思路

一个大的div盒子表示tab选项卡整体，里面嵌套上下两个盒子，上面的盒子是选项卡的导航区，下面的盒子是选项卡的内容区，导航中有几个子项，内容区的盒子就对应有几个；

    <div class="tab">

        <!-- 选项卡的导航 S -->

        <ul class="tab_nav">

            <li>体育新闻</li>

            <li class="cur">教育新闻</li>

            <li>热点新闻</li>

        </ul>

        <!-- 选项卡的导航 E -->

        <!-- 选项卡内容 -->

        <div class="tab_box">

            <div class="item">体育新闻内容</div>

            <div class="item" style="display: block;">教育新闻内容</div>

            <div class="item">热点新闻内容</div>

        </div>

    </div>

Css

内容区域的盒子一般我们都要隐藏，然后在html结构中谁显示给谁用行内样式设置显示即可；

    <style>

        .tab {

            width: 300px;

            height: 345px;

            margin: 50px auto;

            border: 2px solid #f00;

        }

 

        .tab_nav {

            height: 45px;

        }

        .tab_nav li {

            float: left;

            width: 100px;

            height: 45px;

            background-color: #ccc;

            text-align: center;

            line-height: 45px;

            cursor: pointer;

        }

        .tab_nav .cur {

            background-color: #f00;

            color: #fff;

        }

        .tab_box .item {

            display: none;

            height: 300px;

            background-color: #f00;

        }

    </style>