javascript实现Tab选项卡

最新推荐文章于 2023-07-21 22:38:10 发布

zhao不到

最新推荐文章于 2023-07-21 22:38:10 发布

阅读量1k

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript js Tab选项卡 html居中

本文链接：https://blog.csdn.net/qq_32869419/article/details/79845703

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景

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

本次要实现的如下

实现思路

首先用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>

zhao不到

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
javascript实现Tab选项卡

背景现在很多网站都有类似tab选项卡的，尤其在登录界面常常出现。今天将对tab选项卡进行剖析，并附上代码。本次要实现的如下实现思路首先用html将头部选项栏和底下详情栏分开&lt;div id="tab"&gt; &lt;div id="label"&gt; &lt;ul&gt; &lt;li class="enable"&gt;java
复制链接

扫一扫