tab菜单（2015年最流行的）-网页编程网

当前位置：主页 >> html5 >> 正文

tab菜单（2015年最流行的）

阅读：4878 输入：2014-05-28 00:27:58

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
    #tab{
        width:100%;
        height:200px;
        }
    #tabTitle{
        width:100%;
        height:25px;
        line-height:25px;
        }
        #tabTitle .tabTitleCurrent{
            border:2px solid #888;
            background:#888;
        }
        #tabTitle h3{
        margin:0;
        padding:0;
        width:80px;
        background:#ccc;
        float:left;
        line-height:25px;
        text-align:center;
        border:2px solid white;
        font-size:12px;
        color:white;
        }
    #tabContent{
        width:100%;
        height:175px;
        background:#888;
        color:white;
    }
    #tabContent div{
        display:none;
    }
    #tabContent .tabContentCurrent{
        display:block;
    }
    #tabContent .tabContentCurrent ul{
        margin-top:2px;
        padding:5px;
        list-style:none;
    }
</style>
<script type="text/javascript">
    function tabShow(num){
        var h3os=document.getElementsByTagName("h3");
        var cdivs=document.getElementById("tabContent").getElementsByTagName("div");
        for(i=0;i<h3os.length;i++){
            if(i==num){
                h3os[i].className="tabTitleCurrent";
                cdivs[i].className="tabContentCurrent";
                }
            else{
                h3os[i].className="";
                cdivs[i].className="";
                }
            }
        }
</script>
</head>
<body>
<div id="tab">
    <div id="tabTitle">
        <h3 class="tabTitleCurrent" onMouseOver="tabShow('0');">第一项</h3>
        <h3 onMouseOver="tabShow('1');">第二项</h3>
        <h3 onMouseOver="tabShow('2');">第三项</h3>
    </div>
    <div id="tabContent">
        <div class="tabContentCurrent">
            <ul>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
            </ul>
        </div>
                <div>
            <ul>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

相关阅读: 兼容所有浏览器js滑动门，tab选项卡特效代码; jQuery实现表单动态添加与删除数据的操作; 用css+js实现选项卡切换效果，个数动态获取