javascript实现Tab选项卡

背景

现在很多网站都有类似tab选项卡的,尤其在登录界面常常出现。今天将对tab选项卡进行剖析,并附上代码。

本次要实现的如下


实现思路

  1. 首先用html将头部选项栏和底下详情栏分开
<div id="tab">
    <div id="label">
        <ul>
            <li class="enable">java</li>
            <li>python</li>
            <li>php</li>
            <li>c++</li>
        </ul>
    </div>
    <div id="content">
        <div class="enable">
            <ul>
                <li>javase </li>
                <li>javaee </li>
                <li>javame </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>django</li>
                <li>request</li>
                <li>urlib</li>
            </ul>
        </div>
        <div>yii,Laravel</div>
        <div>STL,DFS,AVL</div>
    </div>
</div>

2.书写css样式

将整体作为一个盒子水平和垂直居中,margin 为auto,left,buttom...保证四个值为0即可实现居中

#tab {
       width: 400px;
       height: 200px;
       box-shadow: 5px 5px 15px #4C1107;
       /* 竖直 水平居中 */
       background: #fff;
       margin: auto auto;
       position: absolute;
       left: 0;
       bottom: 0;
       top: 0;
       right: 0;
        }

实现四个选项卡左浮动

设置选项卡的样式,并设置激活状态下,颜色为白色。

设置详情的样式,并设置被激活的时候,透明度为1,而未激活的透明度都为0,用透明度控制显示

源代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, 'Microsoft Yahei', Helvetica, sans-serif;
        }
        
        body {
            height: 100%;
            width: 100%;
        }
        
        .box {
            width: 600px;
            height: 400px;
            background: #D72D13;
            /* border: 1px solid #000; */
            /* 竖直 水平居中 */
            margin: auto auto;
            position: absolute;
            left: 0;
            bottom: 0;
            top: 0;
            right: 0;
        }
        
        #tab {
            width: 400px;
            height: 200px;
            box-shadow: 5px 5px 15px #4C1107;
            /* border: 1px solid #000; */
            /* 竖直 水平居中 */
            background: #fff;
            margin: auto auto;
            position: absolute;
            left: 0;
            bottom: 0;
            top: 0;
            right: 0;
        }
        
        #label {
            height: 50px;
            /* border: 1px solid #aaa; */
        }
        
        #label ul {
            list-style-type: none;
        }
        
        #label li {
            color: #65170A;
            text-align: center;
            padding: 15px 0;
            width: 100px;
            height: 20px;
            /* border: 1px solid #fff; */
            float: left;
            background: #831C0B;
            border-right: none;
        }
        
        #label li.enable {
            color: #831C0B;
            background: #fff;
            border-bottom: none;
        }
        
        #content {
            height: 150px;
        }
        
        #content div {
            margin-left: 20px;
            padding: 10px 20px;
            font-size: 25px;
            position: absolute;
            /* 非激活状态透明度为0 */
            opacity: 0;
        }
        
        #content div.enable {
            /* 激活状态相当于 透明度为1 */
            color: #831C0B;
            opacity: 1;
        }
    </style>

</head>

<body>
    <div class="box">
        <div id="tab">
            <div id="label">
                <ul>
                    <li class="enable">java</li>
                    <li>python</li>
                    <li>php</li>
                    <li>c++</li>
                </ul>
            </div>
            <div id="content">
                <div class="enable">
                    <ul>
                        <li>
                            javase
                        </li>
                        <li>
                            javaee
                        </li>
                        <li>
                            javame
                        </li>

                    </ul>
                </div>
                <div>
                    <ul>
                        <li>django</li>
                        <li>request</li>
                        <li>urlib</li>
                    </ul>
                </div>
                <div>yii,Laravel</div>
                <div>STL,DFS,AVL</div>

            </div>
        </div>
    </div>

    <script>
        window.onload = function() {


            //获得表头父标签
            var label = document.getElementById('label');
            // 获得选项卡数组列表
            var list = label.getElementsByTagName('li');
            //获得内容父标 
            var content = document.getElementById('content')
                // 获得对应内容数组列表
            var cont = content.getElementsByTagName('div')


            //let 定义局部变量  var 容易定义全局变量  
            for (let i = 0; i < list.length; i++) {
                // 给选项列表加上索引
                list[i].index = i;

                // 列表中每个选项增加一个鼠标滑过事件
                list[i].onmouseover = function() {
                    // 事件触发,展示内容
                    show(this.index);
                }


            }
            // 展示内容的方法
            function show(index) {

                // 把所有的内容先变为非激活状态
                for (let i = 0; i < list.length; i++) {
                    // 激活状态 class ='enable' 非激活 class为空
                    list[i].className = "";
                    cont[i].className = "";
                }
                // 当鼠标滑过的时候,事件触发,得到相应index,设置此时的选项卡和内容都为激活状态
                list[index].className = "enable";
                cont[index].className = "enable";
            }
        }
    </script>

</body>

</html>

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页