supce's blog

CSS学习笔记之选项卡

发表于  |    |  

网页中的选项卡

在一些门户网站中，为了在有限的网页空间中尽可能的展示更多的信息，会采用tab选项卡的方式。比如网易首页就使用了大量的选项卡。

下面学习几种实现tab选项卡的方式

Iframe框架

记得以前在很多XX后台管理系统中会使用iframe框架来实现在同一个页面中相同的位置显示不同的内容
先是HTML框架子：

<ul>
    <li><a href="http://163.com" target="web_wrapper">网易</a></li>
    <li><a href="http://baidu.com" target="web_wrapper">百度</a></li>
    <li><a href="http://sohu.com" target="web_wrapper">搜狐</a></li>
    <li><a href="http://sina.com.cn" target="web_wrapper">新浪</a></li>
</ul>
<iframe scrolling="no" src="http://163.com" name="web_wrapper"></iframe>

简单修改下样式

<style type="text/css">
    ul{
        list-style: none;
    }
    li{
        float: left;
        margin-right: 10px;
    }
    a{
        text-decoration: none;
    }
    iframe{
        width: 960px;
        height: 400px;
    }
</style>

简单粗暴：

利用JS实现tab选项卡

iframe感觉并不是很好用，可以利用JS实现一个更加灵活的tab选项卡。选项卡主要由多个选项卡标题和选项卡内容区域组成，通过浮动或者定位将选项卡标题和内容分别控制在某个区域，然后通过JS来给我们的选项卡标题添加事件以实现控制选项卡内容
大概就是下图这个意思：

首先还是我们的HTML框架子

<div id="tab">
    <h3 class="selected" onmouseover="go(1)">选项卡一</h3>
    <div class="block">
        <ul>
            <li>习近平:构建不敢腐不能腐不想腐的机制</li>
            <li>这些年习近平的劳动节 国平 网信专题 这三年</li>
            <li>李克强在北大讲了啥 校长教授们连鼓四次掌</li>
            <li>中央军委与卫计委等部门调查北京市武警二院</li>
            <li>外交部:"西藏流亡政府"不合法"选举"是场闹剧</li>
        </ul>
    </div>
    <h3 onmouseover="go(2)">选项卡二</h3>
    <div>
        <ul>
            <li>莆田人承包了中国90%寺庙？网帖系旧文拼凑</li>
            <li>江西"头号老赖"引爆官场地震 苏荣等官员涉案</li>
            <li>中国最高过山车半空停车 28人悬50米高空(图)</li>
            <li>准新娘宴客时被邻桌砸满身血 工作人员未阻拦</li>
            <li>母女大闹机场被拘10天 女儿自称"市政协委员"</li>
        </ul>
    </div>
    <h3 onmouseover="go(3)">选项卡三</h3>
    <div>
        <ul>
            <li>学者：中国实际控制黄岩岛已4年 填了更好</li>
            <li>巴斯钢铁造船厂将建造首艘伯克III型驱逐舰</li>
            <li>澳媒:澳买潜艇对付中国?中方觉得没啥要紧的</li>
            <li>澳新潜艇将装哪些美式装备 已采购战斧导弹</li>
            <li>周琦优劣势明显难坏NBA 莱斯特的"平凡"之路</li>
        </ul>
    </div>  
</div>


然后添加样式

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #tab{
        position: relative;
        width: 333px;
        margin: 0 auto;
        padding: 10px;
        font-size: 15px;
    }
    h3{
        float: left;
        text-align: center;
        width: 100px;
        height: 30px;
        line-height: 30px;
        border:1px solid #000;
        border-left: none;
        background-color: #c0c0c0;
        cursor: pointer;
    }
    h3:first-child{
        border-left:1px solid #000;
    }
    .selected{
        background-color: #FFF;
    }
    ul{
        padding: 5px;
        list-style: none;
    }
    ul li{
        margin: 20px 0;
        border-bottom:1px dashed #a8a8a8;
    }
    #tab div{
        position: absolute;
        top: 30px;
        left:0;
        display: none;
    }
    #tab .block{
        display: block;
    }

利用JS添加mouseover事件

<script type="text/javascript">
    var h = document.getElementById("tab").getElementsByTagName("h3");
    var d = document.getElementById("tab").getElementsByTagName("div");
    function go(num){
        for(var i=0;i<h.length;i++){
            if (num-1 == i) {
                h[i].className+=" selected";
                d[i].className+=" block";
            }else{
                h[i].className=" ";
                d[i].className=" ";
            }
        }
    }
</script>

刷新下页面：

对选项卡进行优化

这时候会发现刚才的例子由于利用了float和absolute定位的方式，我们即使清除浮动也无法使父元素的高度自适应，想办法只使用float不使用absolute，这时就需要修改HTML代码的结构了
修改后的HTML结构如下：

<div id="tab">
    <h3 class="selected" onmouseover="go(1)">选项卡一</h3>
    <h3 onmouseover="go(2)">选项卡二</h3>
    <h3 onmouseover="go(3)">选项卡三</h3>
    <div class="block">
        <ul>
            <li>习近平:构建不敢腐不能腐不想腐的机制</li>
            <li>这些年习近平的劳动节 国平 网信专题 这三年</li>
            <li>李克强在北大讲了啥 校长教授们连鼓四次掌</li>
            <li>中央军委与卫计委等部门调查北京市武警二院</li>
            <li>外交部:"西藏流亡政府"不合法"选举"是场闹剧</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>莆田人承包了中国90%寺庙？网帖系旧文拼凑</li>
            <li>江西"头号老赖"引爆官场地震 苏荣等官员涉案</li>
            <li>中国最高过山车半空停车 28人悬50米高空(图)</li>
            <li>准新娘宴客时被邻桌砸满身血 工作人员未阻拦</li>
            <li>母女大闹机场被拘10天 女儿自称"市政协委员"</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>学者：中国实际控制黄岩岛已4年 填了更好</li>
            <li>巴斯钢铁造船厂将建造首艘伯克III型驱逐舰</li>
            <li>澳媒:澳买潜艇对付中国?中方觉得没啥要紧的</li>
            <li>澳新潜艇将装哪些美式装备 已采购战斧导弹</li>
            <li>周琦优劣势明显难坏NBA 莱斯特的"平凡"之路</li>
        </ul>
    </div>  
</div>

样式稍作修改

#tab{
        width: 333px;
        margin: 0 auto;
        padding: 10px;
        font-size: 15px;
        overflow: hidden;
    }
#tab div{
        float: left;
        display: none;
    }

其他保持不变，刷新页面会发现父元素可以自适应高度了

但是这样又带来另一个问题，那就是渐进增强与平稳退化。比如当某些原因导致我们的CSS不能加载时，没有样式的HTML页面变成了这样：

这样的结构其实并不如上一个HTML结构优秀。但为了向父元素高度自适应妥协，也暂时只好这样了。