JavaScript写选项卡，自定义索引，this的使用

最新推荐文章于 2022-07-21 21:30:06 发布

未来aaa

最新推荐文章于 2022-07-21 21:30:06 发布

阅读量472

点赞数

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

本文链接：https://blog.csdn.net/weilai_a/article/details/121878641

版权

前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

首先讲解思路。

1.当前事件触发的时候，想让所有的li都没有背景颜色并且让所有的div都隐藏，然后再让当前点击的这个li有颜色，并让对应的那个div显示

2.涉及到重复的事情必然要循环遍历

借此机会锻炼自己的JS。注意自定义索引和this的使用。

<!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>选项卡2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
        ul{
            width: 300px;
            list-style: none;          
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            user-select: none;/*清除默认选择文本效果*/
        }
        .box div{
            height: 270px;
            display: none;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 270px;
        }
    </style>
</head>
<body>
    <div class="box">
       <ul>
           <li class="myLi" style="background-color: chocolate;">HTML</li>
           <li class="myLi">CSS</li>
           <li class="myLi">JavaScript</li>
       </ul>
       <div style="display: block;">HTML内容</div>
       <div>CSS内容</div>
       <div>JavaScript内容</div>
    </div>
    <script>
        // 思路
        // 1.当前事件触发的时候，想让所有的li都没有背景颜色并且让所有的div都隐藏，然后再让当前点击的这个li有颜色，并让对应的那个div显示
        // 2.涉及到重复的事情必然要循环遍历。
        // 获取元素
        var myBox = document.getElementsByClassName("box")[0];
        var myLi = myBox.getElementsByTagName('li');
        var myDiv = myBox.getElementsByTagName('div');
        //逻辑
        //利用循环给每个li绑定事件
        for(var i=0;i<myLi.length;i++){
            //自定义索引（一般给多个相同标签添加同一事件时就会用到自定义索引）
            myLi[i].index = i;
            //点击事件
            myLi[i].onclick = function(){
                // 再点击之后，利用循环将所有的li颜色和div样式清除
                for(var j=0;j<myDiv.length;j++){
                    myLi[j].style.background="";//将li的颜色清空
                    myDiv[j].style.display="none";//将div隐藏
                }
                this.style.backgroundColor="chocolate";//重新给li颜色,这里用的是this,因为this是当前作用的对象，不能用myLi[i],myLi[i]不是一个确切的对象，更类似于一个集合
                myDiv[this.index].style.display="block";//这里用到了自定义索引，因为要根据li的索引对应的找到div的索引。
            }
            
        }
    </script>
</body>
</html>

未来aaa

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript写选项卡，自定义索引，this的使用

首先讲解思路。1.当前事件触发的时候，想让所有的li都没有背景颜色并且让所有的div都隐藏，然后再让当前点击的这个li有颜色，并让对应的那个div显示2.涉及到重复的事情必然要循环遍历借此机会锻炼自己的JS。注意自定义索引和this的使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
复制链接

扫一扫

专栏目录