js实现选项卡(Tab)

来源：互联网发布：三维图制作软件编辑：程序博客网时间：2024/05/16 09:13

一 . 采用编译器

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. 目的 : 实现选项卡的效果

//jQfunction $(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';        }    }}

八. 总结

1. 最近学习的js,附上写的一个选项卡案例,大家有什么不明白的地方,可以给我留言,谢谢!!!!

0 0