HTML5-Tab标签

最新推荐文章于 2022-04-26 17:37:58 发布

月迷津渡丶

最新推荐文章于 2022-04-26 17:37:58 发布

阅读量1.6k

点赞数

分类专栏： Web js 文章标签： Tab标签 CSS

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/44007799

版权

Web 同时被 2 个专栏收录

145 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

先举个例子,淘宝网首页截图:

这里公告,规则什么的就是Tab标签

css.css:

*{
    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:pink ;
}

.tab-title ul{
    position: absolute;
    width: 301px;
    left: -1;/*298+1*2=301-1*/
}

.tab-title li{
    float: left;
    width: 58px;
    height: 26px;
    line-height: 26px;/*行高*/
    text-align: center;
    padding: 0 1px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;

}

.tab li a:link,.tab-title li a:visited{
    text-decoration: none;/*下划线*/
    color: black;
}
.tab li a:hover{/*鼠标滑过事件*/
    color: red;
    font-weight: 700;/*加粗*/
}

/*
内容处理*/
.tab-title li.select{
    background: #ffffff;
    border-bottom-color: #ffffff;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    padding: 0;
}

.tab .tab-content .tabct{
    margin: 10px 10px 10px 19px;
}

.tab .tab-content .tabct ul li{
    float: left;
    width: 134px;/*计算得*/
    height: 25px;
    overflow: hidden;
}

js.js

function $(id) {
    return typeof id == "string" ? document.getElementById(id) : id;
}

window.onload = function () {
    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++){
        titleName[i].id = i;//加上id
        titleName[i].onmouseover = function () {//鼠标划过事件
            for(var j = 0;j<titleName.length;j++){
                titleName[j].className ="";//先去掉所有的class
                tabContent[j].style.display = "none";//不显示
            }
            this.className = "select";//添加class(select)
            tabContent[this.id].style.display = "block";//显示
        }
    }
};

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Tab切换</title>
    <link type="text/css" href="css.css" rel="stylesheet">
    <script src="js.js"></script>
</head>
<body>
<div class="tab" id="tab">
    <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>
    <div class="tab-content" id="tab-content">
        <div class="tabct" style="display: block"><!--display: block显示-->
            <ul>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
                <li><a href="#">英文媒体遇到中国羊年</a></li>
                <li><a href="#">晒晒2014淘宝公益账单</a></li>
                <li><a href="#">用手淘扫码比价过大年</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">春节交易超时公告</a></li>
                <li><a href="#">抽检新规已生效！</a></li>
                <li><a href="#">1月发布新规汇总</a></li>
                <li><a href="#">食品安全专题进行中</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">[干货] 小卖家做优化</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">谨防假冒客服诱导退款</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">你不知道的神秘雷锋日记</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
                <li><a href="#">跟淘宝做件浪漫的事情</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

效果:

月迷津渡丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5-Tab标签

先举个例子,淘宝网首页截图:这里公告,规则什么的就是Tab标签css.css:*{ margin: 0; padding: 0; list-style: none; font-size: 12px;}.tab{ width: 298px; height: 98px; margin: 10px; border: 1p
复制链接

扫一扫