js实现选项卡(Tab)

最新推荐文章于 2024-03-14 16:53:37 发布

萧家大公子

最新推荐文章于 2024-03-14 16:53:37 发布

阅读量2.5k

点赞数 4

分类专栏： js 文章标签： html css 编译器 javascript

本文链接：https://blog.csdn.net/xf931456371/article/details/52797070

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一 . 采用编译器

1. WebStorm编译器

二. 实现的步骤

1. 创建目录(2个)

2. 创建目录对应的文件(3个)

3. 分别将css的文件和js的文件引入html文件中

三. 文件目录展示图

这里写图片描述

四. 选项卡效果图

这里写图片描述

五. Html中的代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab切换</title>
    <!--引入css的文件-->
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--选项卡-->
    <div id="tab">
        <!--头部-->
        <div id="tab-header" class="tab-header">
            <ul>
                <li class="selected">公告</li>
                <li>规则</li>
                <li>论坛</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
        </div>
        <!--身体-->
        <div id="tab-content">
            <div class="dom" style="display: block;">
                <ul>
                    <li>
                        <a href="#">数据七夕:金牛爱送玫瑰</a>
                    </li>
                    <li>
                        <a href="#">阿里打造"互联网监管"</a>
                    </li>
                    <li>
                        <a href="#">10万家店60万新品</a>
                    </li>
                    <li>
                        <a href="#">全球最大网上时装周</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>
                        <a href="#">“全额返现”要管控啦</a>
                    </li>
                    <li>
                        <a href="#">淘宝新规发布汇总(7月)</a>
                    </li>
                    <li>
                        <a href="#">炒信规则调整意见反馈</a>
                    </li>
                    <li>
                        <a href="#">质量相关规则近期变更</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <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="dom">
                <ul>
                    <li>
                        <a href="#">接次文件，毁了一家店</a>
                    </li>
                    <li>
                        <a href="#">账号安全神器阿里钱盾</a>
                    </li>
                    <li>
                        <a href="#">新版阿里110上线了</a>
                    </li>
                    <li>
                        <a href="#">卖家学违禁避免被处罚</a>
                    </li>
                </ul>
            </div>
            <div class="dom">
                <ul>
                    <li>
                        <a href="#">为了公益high起来</a>
                    </li>
                    <li>
                        <a href="#">魔豆妈妈在线申请</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--引入js的文件-->
    <script src="js/index.js"></script>
</body>
</html>

六. css中的代码

1. css中设置的代码主要是对html中的标签属性进行相关设置(颜色;位置等)—>注意:如果其中的属性不是很明白,可以通过w3c查询可以得知.

/*清空多余的间距*/
*{
    padding: 0px;
    margin: 0px;
}

/*处理选项卡背景*/
body{
    margin: 80px;
}

/*除去li的圆点*/
ul{
    list-style: none;
}

#tab{
    /*设置边框*/
    border: 1px solid #dddddd;

    /*设置宽度*/
    width: 498px;

    /*设置高度*/
    height: 130px;
}

/*设置头部*/
#tab-header{
    /*设置高度*/
    height: 38px;
    /*设置背景颜色*/
    background-color: #f7f7f7;
    /*设置定位*/
    position: relative;
}

/*设置ul*/
.tab-header ul{
    /*设置宽度*/
    width: 501px;

    /*定位*/
    position: absolute;

    /*设置竖线合并*/
    left: -1px;
}

/*设置li标签*/
.tab-header ul li{
    /*浮动*/
    float: left;

    /*宽度*/
    width: 98px;

    /*高度*/
    height: 38px;

    /*垂直居中*/
    line-height: 38px;

    /*居中*/
    text-align: center;

    /*设置内边距*/
    padding: 0px 1px;

    /*下边框*/
    border-bottom: 1px solid #dddddd;
}

/*设置里面的第一个选中的li标签*/
#tab-header ul li.selected{
    background-color: white;

    /*下边框*/
    border-bottom: 0px;

    /*左边框*/
    border-left: 1px solid #dddddd;

    /*右边框*/
    border-right: 1px solid #dddddd;

    /*清除内部的边距*/
    padding: 0px;
}

/*设置li标签的伪类*/
.tab-header ul li:hover{
    font-weight: bold;
    color: orangered;
}

/*中间的内容*/
#tab-content ul{
    margin-top: 10px;


}

/*设置a标签*/
a{
    /*设置字体颜色*/
    color: black;

    /*除去下划线*/
    text-decoration: none;
}

/*设置中间内容的li标签*/
#tab-content li{
    /*设置浮动位置*/
    float: left;

    /*设置宽度*/
    width: 220px;

    /*间距设置*/
    margin: 10px;


}

/*设置中间内容的伪类*/
#tab-content a:hover{
    color: orangered;
}

/*设置让超出父控件的内容隐藏*/
#tab-content .dom{
    display: none;
}

七. js文件中的代码(代码内部都已经对相关代码注释了)

1. 目的 : 实现选项卡的效果

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

window.onload = function () {
    //1.获取头部所有的li标签和中间内容标签
    var lis = $('tab-header').getElementsByTagName('li');
    var content = $('tab-content').getElementsByClassName('dom');

    //打印是否获取了相应的内容
    // console.log(lis, content);

    //判断
    if (lis.length != content.length) return;

    //遍历监听鼠标在头部上的移动
    for (var i = 0; i < lis.length; i++){
        //移除单独的li标签
        var li = lis[i];
        //绑定id(负责选中的)
        li.id = i;
        //监听鼠标在li上的移动
        li.onmousemove = function () {
            for (var j = 0; j < lis.length; j++){
                //清除class
                lis[j].className = '';
                //让所有的内容隐藏
                content[j].style.display = 'none';
            }
            //设置className
            this.className = 'selected';
            //设置内容显示
            content[this.id].style.display = 'block';
        }
    }
}