js选项卡的简单功能实现

js 专栏收录该内容
3 篇文章 0 订阅

js选项卡的简单功能实现

首先在html中写出基本结构

  <ul>
        <li style=" background-color: red;">aa 
            <div style="display: block; background-color: red;" >111</div>//默认显示的div
        </li>
        <li>bb
            <div style="background-color: yellow;">222</div>
        </li>
        <li>cc
            <div style=" background-color: green;">333</div>
        </li>
    </ul>

然后在css中写样式

     *{
            margin: 0;
            padding: 0;
        }//清除网页内置边距
        ul  {
            list-style: none;
            position: relative;
        }
        
        li {
            float: left;
            background-color: #999;
            width: 100px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            border: 1px solid black;
            border-collapse: collapse;
            
        }
        div{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 35px;
            display: none;
        }//隐藏div
  

下面是这个功能的js部分,也是主要部分;

    <script>

        var lis=document.querySelectorAll('li');//找到li元素
        for(i=0;i<lis.length;i++){
            lis[i].addEventListener('click',  function(){
            	//这个for循环时把所有的div设置隐藏并把li元素的颜色重置
                for (var j = 0; j < lis.length; j++) {
                       lis[j].children[0].style.display = 'none';//使div隐藏
                       lis[j].style.backgroundColor='#999';//重置li元素颜色
                    }
                  //找到点击这个li元素的div背景颜色
                var clo=window.getComputedStyle(this.children[0],null).backgroundColor;
                this.style.backgroundColor=clo;//点击时设置li元素的颜色
               this.children[0].style.display='block';//点击使div出现
            },false);  
        } 
    </script>

主要思路为先在css中把其中俩个div用display:none;给隐藏起来,设置一个默认显示的div,之后再在js中用querySelectorAll()方法找到html界面中的li标签元素;然后用for循环遍历每一个li元素,在每一个li元素上添加一个鼠标点击事件,在点击事件绑定的函数中设置一个循环先把所有的div也就是li元素的第一个孩子节点设置一个样式隐藏起来;之后在循环外面把点击的那个li元素下的div设置显示的样式。这样就能实现一个简单的选项卡功能。

效果图

在这里插入图片描述

在这里插入图片描述在这里插入图片描述
ps:样式很菜请忽略;

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

lyhh5

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值