div css javascript tab 切换页

最新推荐文章于 2023-05-28 23:35:58 发布

迷雾飞鹰

最新推荐文章于 2023-05-28 23:35:58 发布

阅读量318

点赞数

分类专栏：前端学习文章标签： tab-切换页

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图
这里写图片描述
css部分 tab.css

body ,ul{
    margin:0;
    padding:0;
    list-style:none;
    font-size:12px;
}
.tab {
    width:298px;
    height:98px;
    margin:10px;
    border:1px solid #eee;
    overflow:hidden;
}
.tab-title {
    height:27px;
    position:relative;
    background:#f7f7f7;
}
.tab-title ul {
    position:absolute;
    width:301px;
    left:-1;
}
.tab-title li {
    float:left;
    width:58px;
    height:26px;
    line-height:26px;
    text-align:center;
    padding:0 1px;
    overflow:hidden;
}
.tab-title a:link,tab-link a:visited{
    text-decoration:none;
    color:#000;
}
.tab-title a:hover {
    color:#f90;
    font-weight:700;

}
.tab-title li.select {
    background:#fff;
    border-bottom: 1px solid #fff;
    border-left:1px solid #eee;
    border-right:1px solid #eee;
    padding:0;
}

div部分

<html>
    <head>
        <meta charset="utf-8">
        <title>taobao tab</title>
        <!--引入css-->
        <link type="text/css" rel="stylesheet" href="tab.css">  
    </head>

    <body>      
        <div class="tab" id="tab">
            <!-- 标题 START-->
            <div class="tab-title" id="tab-title">
                <ul >
                    <li class="select"><a href="#">公告</a></li>
                    <li><a href="#">规则</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">安全</a></li>
                    <li><a href="#">公益</a></li>
                </ul>   
            </div>
            <!-- 标题 END-->  

            <!-- 内容 START-->    
            <div class="tab-content" id="tab-content">
                <div class="tabct" style="display:block">
                    1111111111111
                </div>
                <div class="tabct" style="display:none">
                    2222222222222222
                </div>
                <div class="tabct" style="display:none">
                    3333333333
                </div>
                <div class="tabct" style="display:none">
                    44444444444444
                </div>
                <div class="tabct" style="display:none">
                    5555555555555
                </div>
            </div>
            <!-- 内容 START-->        
        </div>
        <!-- 引入js-->    
        <script  src="tab.js"></script> 
    </body> 
</html>

js部分 tab.js

//如果传入id为 string类型 返回document.getElementById(id) 否则返回id本身
function $(id){
    return typeof id=="string"?document.getElementById(id):id;

    }
window.onload=function(){
    //获取标题下的所有li标签   及    内容中的所有div
    var titleName=$("tab-title").getElementsByTagName("li");
    var tabContent=$("tab-content").getElementsByTagName("div");
    //如果 标题数 与 内容数不对应  结束
    if(titleName.length!=tabContent.length){
        return;
        }
    for(var i=0;i<titleName.length;i++){
        //给标题下的所有li标签 id赋值
        titleName[i].id=i;
        titleName[i].onmouseover=function(){
            //初始化 标题样式  及 内容
            for(var j=0;j<titleName.length;j++){
                titleName[j].className="";
                tabContent[j].style.display="none";
                }
                //显示选中的 标题样式  及对应的  内容
            this.className="select";
            tabContent[this.id].style.display="block";
            }


        }

}

迷雾飞鹰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
div css javascript tab 切换页

效果图 css部分 tab.cssbody ,ul{ margin:0; padding:0; list-style:none; font-size:12px;}.tab { width:298px; height:98px; margin:10px; border:1px solid #eee; over
复制链接

扫一扫