JS切换tab栏

最新推荐文章于 2023-05-28 23:35:58 发布

别让我头发掉光

最新推荐文章于 2023-05-28 23:35:58 发布

阅读量677

点赞数 8

分类专栏：前端文章标签： javascript css css3

本文链接：https://blog.csdn.net/lmx20010720lmx/article/details/128225646

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天我们来做这样一个效果：切换 tab栏
请添加图片描述
html布局:

 <div class="big_box">
        <ul class="big_box_ul">
            <li class="item" style="background-color: pink;">菜单</li>
            <li class="item">体系实战</li>
            <li class="item">职场软技能</li>
        </ul>
    </div>
    <div class="two_box">
        <div class="two_box_one" style="display: block;">切换tab栏内容1</div>
        <div class="two_box_one">切换tab栏内容2</div>
        <div class="two_box_one">切换tab栏内容3</div>
    </div>

css代码

   <style>
        .big_box {
            width: 1000px;
            height: 50px;
            background-color: red;
        }

        .big_box_ul {
            margin: 0;
            padding: 0;
        }

        .big_box_ul li {
            /* background-color: pink; */
            list-style: none;
            float: left;
            padding: 15px;
            margin-right: 42px;
        }

        .two_box {
            width: 300px;
            height: 300px;
            /* background-color: blue; */
        }

        .two_box .two_box_one {
            /* background-color: blue; */
            display: none;
        }
    </style>

js思路：
首先做这个切换tab栏需要分为两个模块来完成，我们可以把页面分为两块
第一个模块 :
在这里插入图片描述
第二个模块 :

我们首先来写上面的模块：
js代码

//获取元素
    var item = document.querySelectorAll('.item');
    var twoBox = document.querySelectorAll('.two_box_one');
    //首先给所有的菜单栏添加上点击事件
    for (var i = 0; i < item.length; i++) {
     item[i].onclick = function () {
            //这里可以通过alert来检查绑定上事件没有
            // alert(111);
            //排他思想第一步:1.干掉所有人
            for (var i = 0; i < item.length; i++) {
                item[i].style.backgroundColor = '';
            }
            //排他思想第一步:2.给自己添加上样式
            this.style.backgroundColor = 'pink';
            }
}

这个时候可以检查一下点击能不能生效
在这里插入图片描述
如果能生效的话我们就可以开始写下半部分了
做下面的内容模块需要一个核心算法思路:给上面ul里面的所有li添加自定义属性，属性值从0编号
js代码:

//获取元素
    var item = document.querySelectorAll('.item');
    var twoBox = document.querySelectorAll('.two_box_one');
    //首先给所有的菜单栏添加上点击事件
    for (var i = 0; i < item.length; i++) {
    //下面的内容模块 第一步:开始给5个小li设置索引号(!!!!!!!!)
        item[i].setAttribute('index', i);
     	item[i].onclick = function () {
            //这里可以通过alert来检查绑定上事件没有
            // alert(111);
            //排他思想第一步:1.干掉所有人
            for (var i = 0; i < item.length; i++) {
                item[i].style.backgroundColor = '';
            }
            //排他思想第一步:2.给自己添加上样式
            this.style.backgroundColor = 'pink';
             //下面的内容模块 第二步:获取点击的索引号(!!!!!!!!)
            var index = this.getAttribute('index');
            //干掉所有人，让其余的item这些div隐藏
            for (var i = 0; i < twoBox.length; i++) {
                twoBox[i].style.display = 'none';
            }
            //留下我自己 让对应的item显示出来
            twoBox[index].style.display = 'block';
            }
}

最后源码附上:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big_box {
            width: 1000px;
            height: 50px;
            background-color: red;
        }

        .big_box_ul {
            margin: 0;
            padding: 0;
        }

        .big_box_ul li {
            /* background-color: pink; */
            list-style: none;
            float: left;
            padding: 15px;
            margin-right: 42px;
        }

        .two_box {
            width: 300px;
            height: 300px;
            /* background-color: blue; */
        }

        .two_box .two_box_one {
            /* background-color: blue; */
            display: none;
        }
    </style>
</head>

<body>
    <div class="big_box">
        <ul class="big_box_ul">
            <li class="item" style="background-color: pink;">菜单</li>
            <li class="item">体系实战</li>
            <li class="item">职场软技能</li>
        </ul>
    </div>
    <div class="two_box">
        <div class="two_box_one" style="display: block;">切换tab栏内容1</div>
        <div class="two_box_one">切换tab栏内容2</div>
        <div class="two_box_one">切换tab栏内容3</div>
    </div>
</body>

</html>
<script>
    //获取元素
    var item = document.querySelectorAll('.item');
    var twoBox = document.querySelectorAll('.two_box_one');
    //首先给所有的菜单栏添加上点击事件
    for (var i = 0; i < item.length; i++) {
        //下面的内容模块 第一步:开始给5个小li设置索引号
        item[i].setAttribute('index', i);
        //上面的菜单模块
        item[i].onclick = function () {
            //这里可以通过alert来检查绑定上事件没有
            // alert(111);
            //排他思想第一步:1.干掉所有人
            for (var i = 0; i < item.length; i++) {
                item[i].style.backgroundColor = '';
            }
            //排他思想第一步:2.给自己添加上样式
            this.style.backgroundColor = 'pink';
            //下面的内容模块
            //做下面的内容模块需要一个核心算法思路:给上面ul里面的所有li添加自定义属性，属性值从0编号
            //下面的内容模块 第二步:获取点击的索引号
            var index = this.getAttribute('index');
            //干掉所有人，让其余的item这些div隐藏
            for (var i = 0; i < twoBox.length; i++) {
                twoBox[i].style.display = 'none';
            }
            //留下我自己 让对应的item显示出来
            twoBox[index].style.display = 'block';
        }
        //上面的菜单模块

    }
</script>

别让我头发掉光

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS切换tab栏

切换 tab栏html布局:css代码js思路：首先做这个切换tab栏需要分为两个模块来完成，我们可以把页面分为两块第一个模块 :第二个模块 :我们首先来写上面的模块：js代码这个时候可以检查一下点击能不能生效如果能生效的话我们就可以开始写下半部分了做下面的内容模块需要一个核心算法思路:给上面ul里面的所有li添加自定义属性，属性值从0编号js代码:最后源码附上:
复制链接

扫一扫