【Javascript】入门之选项卡

最新推荐文章于 2023-02-06 19:42:02 发布

夹心776655

最新推荐文章于 2023-02-06 19:42:02 发布

阅读量354

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_37086980/article/details/110188983

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述：点击每一个按钮, 将内容切换成对应的, 按钮背景色改变字体也改变

步骤：

1. 布局: 一个父盒子套入3个按钮和3个内容盒

布局中注意三个盒子需要叠加在一起, 这里需要用到绝对定位
只显示点击盒子的内容, 设置激动状态的class = active, 并且使不需要的隐藏(display: none)

2.JS部分

获取元素(box, div, btn), 在有父元素(box)的情况下用父元素来获取
给每一个按钮添加点击事件, 这里需要用到自定义索引存储按钮的下标, 不能直接用i存储, 因为for循环会在页面一打开的时候执行完
只显示一个, 不知道之前什么操作, 需要用到排他, 这里要清空所有类名
最后展示对应内容的盒子和按钮的对应样式(className设置成active)

3.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
         #box{
            position: relative;
        }
        #box div{
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            font-size: 50px;
            line-height: 300px;
            text-align: center;   
            position: absolute;
            top: 30px;
            left: 0;    
            display: none;     
        }
        #box div.active{
            display: block;
        }
        #box button.active{
            background:	#B0C4DE;
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- 
        有几个按钮  就有几块内容

    -->
    <div id="box">
        <button class="active">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="active">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>

    <script>
        /*  选项卡效果
            1. 布局
            2. js
        */
        /* 
            点击每一个按钮, 将内容切换成对应的, 按钮背景色改变 字体也改变
        */
        // 1. 获取元素  按钮  内容
        // 有父元素的情况下用父元素来获取

        var box = document.getElementById('box');
        console.log(box);
        var btns = box.getElementsByTagName('button');
        var divs = box.getElementsByTagName('div');
        console.log(btns, divs);

        // 2.给每一个按钮添加点击事件
        for(var i = 0; i< btns.length; i++){
            // 存索引
            btns[i].index = i;
            // 加事件
            btns[i].onclick = function(){
                // 切换到对应的内容 通过下标设置显示
                // 内容的下标和按钮下标一一对应
                // 按钮的下标 用自定义索引
                // 取索引
                console.log(this.index);

                // 只显示一个 不知道之前是什么操作 排他
                // 所以我们要清空所有类名
                for(var j = 0; j< divs.length; j++){
                    divs[j].className = '';
                    btns[j].className = '';
                }

                // 展示对应内容的盒子
                divs[this.index].className = 'active';
                // 按钮也要显示对应的样式
                this.className = 'active';
            }
        }
    </script>
</body>
</html>

双重选项卡: 鼠标划到哪里, 显示对应区域的内容(A, B, C, D 四层嵌套)

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双重选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .content{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 20px auto;
            position: relative;
        }
        .content > ul{
            width: 150px;
            height: 400px;
            background-color: blue;
            float: left;
        }
        .content > ul > li{
            width: 150px;
            height: 100px;
            line-height: 100px;
            color: #fff;
            background: chocolate;
            border: 1px solid #fff;
            font-size: 26px;
            text-align: center;
            box-sizing: border-box;
        }
        .content .right{
            width: 650px;
            height: 400px;
            background-color: yellow;
            position: absolute;
            right:0;
            top:0;
            display: none; 
        }
        .content .right > div{
            width: 650px;
            height: 350px;
            background-color: blue;
            text-align: center;
            line-height: 350px;
            font-size: 50px;
            color: #fff;
        }
        .content .right > p{
            width: 650px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            text-align: center;
            color: cornsilk;
            display: flex;
        }
        .content .right > p > span{
            background: crimson;
            width: 20%;
        }
        .content .right > p > span.active{
            background-color: green;
        }
        .content > ul > li.active{
            background-color: darkmagenta;
        }
        .content > .right.active{
            display: block;
        }
    </style>
</head>
<script>
    window.onload = function(){
        // 1. 实现小板块的效果  划上每一个底部的span的时候，改变对应的div的内容, 样式随之更改  封装

        // 1.1 获取元素p和span, 有父元素的情况下用父元素来获取

        // 1.5 封装代码, 函数调用

        // 获取父元素
        var content = document.getElementById('content');
        console.log(content);
        
        var p = content.getElementsByTagName('p');
        console.log(p);

        // 获取panel面板
        var panel = content.getElementsByClassName('panel');
        console.log(panel);

        // 调用每一个p和panel
        for(var i = 0; i < p.length; i++){
            getShift(p[i], panel[i]);
        }
        
        function getShift(p, panel){
            var span = p.getElementsByTagName('span');
            // console.log(span);
            // console.log(panel);
            // 1.2 给每一个按钮添加点击事件
            for(var i = 0; i < span.length; i++){
                // 存索引
                span[i].index = i;
                // 添加点击事件
                span[i].onmouseenter = function(){
                    // 切换到对应的内容, 通过下标设置显示
                    // 内容的下标和按钮的下标需要一一对应
                    // 按钮的下标通过自定义索引
                    // console.log(this.index);

                    // 只显示一个, 不知道之前是什么操作 排他
                    // 清空所有类名
                    for(var j = 0; j < span.length; j++){
                        span[j].className = '';
                    }

                    // panel展示对应内容
                    // panel.innerHTML = arr + (this.index+1);
                    panel.innerHTML = this.innerHTML;
                    // 按钮也显示对应的样式
                    this.className = 'active';
                }
            }
        }

        // 2. 实现大板块的功能  划伤每一个左边的li, 让右边对应的right显示出来
        // 2.1 获取元素li
        var lis = content.getElementsByTagName('li');
        console.log(lis);

        // 获取right面板
        var right = content.getElementsByClassName('right');
        console.log(right);

        // 2.2 给每一个lis按钮添加事件
        for(var k = 0; k < lis.length; k++){
            // 存索引
            lis[k].index = k;

            // 添加点击事件
            lis[k].onmouseenter = function(){
                // 获取索引
                console.log(this.index);
                // 进行排他操作
                for(var j = 0; j < lis.length; j++){
                    lis[j].className = '';
                    right[j].className = 'right';
                }
                // 按钮颜色改变
                lis[this.index].className = 'active';
                // right面板内容改变
                right[this.index].className = "right active";

            }
        }

    }
</script>
<body>
    <!-- 布局 : 小版块底部切换, 大板块左边切换
    -->
    <div class="content" id = "content">
        <!-- left panel -->
        <ul>
            <li class = "active">A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
        <!-- right panel -->
        <div class="right active">
            <!-- big panel  -->
            <div class="panel">a1</div>
            <!-- small shift -->
            <p>
                <span class="active">a1</span>
                <span>a2</span>
                <span>a3</span>
                <span>a4</span>
                <span>a5</span>
            </p>
        </div>
        <div class="right">
            <div class="panel">b1</div>
            <p>
                <span class="active">b1</span>
                <span>b2</span>
                <span>b3</span>
                <span>b4</span>
                <span>b5</span>
            </p>
        </div>
        <div class="right">
            <div class="panel">c1</div>
            <p>
                <span class="active">c1</span>
                <span>c2</span>
                <span>c3</span>
                <span>c4</span>
                <span>c5</span>
            </p>
        </div>
        <div class="right">
            <div class="panel">d1</div>
            <p>
                <span class="active">d1</span>
                <span>d2</span>
                <span>d3</span>
                <span>d4</span>
                <span>d5</span>
            </p>
        </div>

    </div>
</body>
</html>

AJAX方式实现选项卡(选项卡的内容存于json文件中)

代码实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cont {
            width: 300px;
            height: 350px;
            position: relative;
        }

        #cont div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: absolute;
            top: 50px;
            display: none;
        }

        #cont div.active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="cont">
        <button d="new">按钮1</button>
        <button d="music">按钮2</button>
        <button d="movie">按钮3</button>
        <div class="active">001</div>
        <div>002</div>
        <div>003</div>
    </div>

    <!-- 
        1. 先写布局
        2. js
    -->
    <script src="./ujiuye.js"></script>
    <script>
        /* 
            1. 先实现效果
            2. 在套数据
        */
        // 选项卡的切换效果  点击没一个按钮 切换到对应的div
        var cont = document.getElementById('cont');
        console.log(cont);
        var btns = cont.querySelectorAll('button');
        var divs = cont.querySelectorAll('div');
        console.log(btns, divs);

        // 每一个按钮
        for (var i = 0; i < btns.length; i++) {
            btns[i].index = i;
            // 加事件
            btns[i].onclick = function () {
                // div和按钮的关系  一一对应  
                // 切换的是按钮的下标
                console.log(this.index);
                for (var j = 0; j < divs.length; j++) {
                    divs[j].className = '';
                }
                divs[this.index].className = 'active';
            }
        }


        /* 
            1. 请求数据
            2. 分析数据  按钮一---宪法日  二--音乐  三---憨豆
            3. 将数据对应的属性名new movie music  添加给对应的按钮  作为自定义属性
            4. 获取每一个按钮, 获取他的自定义的属性名的值  获取数据的属性名
            5. 获取对应的属性值
            6. 渲染到对应的div中
        */
        ajax('get', './json.txt', '', function (res) {
            // res: 接收请求返回的数据
            console.log(res);
            var r = JSON.parse(res);
            console.log(r);

            // console.log(btns[0].getAttribute('d'));
            // console.log(btns[1].getAttribute('d'));
            // console.log(btns[2].getAttribute('d'));
            for (var i = 0; i < btns.length; i++) {
                var k = btns[i].getAttribute('d');
                // 获取对象的属性值 对象.属性名  对象[属性名]
                console.log(r[k]);
                divs[i].innerHTML = r[k];
            }

        });
    </script>
</body>

</html>

面向对象方法实现选项卡

代码实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box, #box1 {
            width: 300px;
            height: 350px;
            position: relative;
        }

        #box button,#box1 button {
            margin: 0 5px;
        }

        #box div, #box1 div {
            position: absolute;
            top: 50px;
            left: 0px;
            height: 300px;
            width: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
            display: none;
        }

        #box div.active,#box1 div.active {
            display: block;
        }

    </style>
</head>

<body>
    <div id="box">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="active">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>

    <div id="box1">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="active">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>

    <script>
        /* 
            点击每一个按钮， 切换到对应的内容  内容和按钮的关系一一对应

            用父节点获取子节点
        */


        // 空函数
        function Tab(id) {
            console.log(this);
            // 构造函数  var  xingcan--->属性
            this.id = id;
            this.box = null;
            this.btns = null;
            this.divs = null;

            // 方法: 动态的行为 行为 函数  创建  函数  操作 添加 修改
            this.box = document.getElementById(this.id);
            this.btns = this.box.getElementsByTagName('button');
            this.divs = this.box.getElementsByTagName('div');

            var that = this; // 构造函数创建出来的对象

            // 每一个按钮
            for (var i = 0; i < this.btns.length; i++) {
                this.btns[i].index = i;
                // 事件
                this.btns[i].onclick = function(){
                    that.iclick(this.index);
                }
            }
        }

        // 公共的方法加给原型
        Tab.prototype.iclick = function (index) {
            // 把每一个都清楚类名
            for (var j = 0; j < this.divs.length; j++) {
                this.divs[j].className = '';
            }
            // 指定的内容显示出来
            this.divs[index].className = 'active';
        }

        new Tab('box');
        new Tab('box1');
    </script>
</body>

</html>