前端学习-JavaScript基础（练习）

Yan阿清

于 2022-03-24 22:43:21 发布

阅读量884

点赞数 9

分类专栏：前端 JavaScript 文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/weixin_51346866/article/details/123723745

版权

前端同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

Tab切换

点击触发对应事件，显示相应内容。在网页中有很多场景应用，所以介绍几种方法，并记录记忆。

css样式

<style>
    *{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .box{
        width: 500px;
        height: 500px;
        /* background-color: aqua; */
        margin: 0 auto;
    }
    .box ul{
        /* 弹性模型 */
        display:flex;
        justify-content:space-evenly;
        background:pink;
    }
    .box ul li{
        height: 50px;
        float: left;
        text-align: center;
        line-height: 50px;
    }
    /* 隐藏其他2个li */
    .box ol li{
        display :none;
    }
    /* 显示第一个li，第一张图 */
    .box ol li.active{
        display: block;
    }
    img{
        width: 100%;

    }

样式有点粗糙，又不是不能用，嘿嘿。

html代码

<body>
    <div class="box">
        <ul > 
            <li class="on">图1</li>
            <li>图2</li>
            <li>图3</li>
        </ul>
        <ol>
            <li  class="active"><a href="#"><img src="./image/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./image/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./image/3.jpg" alt=""></a></li>
        </ol>
    </div>
</body>

注：这里的图片自己找几张，命名1.jpg ，2.jpg ,3.jpg ...

JS代码

第一种：通过循环来设置类名，修改样式，由display来隐藏显示

<script>
//   获取ul下所有的li
var list=document.querySelectorAll('.box ul li')
//   获取ol下所有的li
var olist=document.querySelectorAll('.box ol li')

for(var i=0;i<list.length;i++){
    // 自调用函数
    (function(i){
        list[i].onclick=function(){
            // 去掉ul中li的类名
            for(var j=0;j<list.length;j++){
                list[j].className=''
            }
            // 点击那个li设置 类名
            this.className='on'

            // 去掉ol中所有li的类名
            for(var j=0;j<olist.length;j++){
                olist[j].className=''
            }
            // 当前li对应的图片所在的li设置 active类名
            olist[i].className='active'
        }
        
    })(i)
}

第二种：定义变量存储，去掉类名，点击那个li，就给相应类名。（多了变量存储，感觉复杂了点咳咳）

//   获取ul下所有的li
var list=document.querySelectorAll('.box ul li')
//   获取ol下所有的li
var olist=document.querySelectorAll('.box ol li')


// 定义2个变量获取ul ol中的带类名的li，也就是第一个li
var oneulli =document.querySelector('.box ul li.on')
// console.log(oneulli)  //输出： <li class="on">图1</li>
var oneolli =document.querySelector('.box ol li.active')

for(var i=0;i<list.length;i++){
    (function(i){
        // 点击事件
        list[i].onclick=function(){
            // 去掉li带的on类名
            oneulli.className=''
            // this表示这个点击事件，点击那个li就给li一个 on类名
            this.className='on'
            // 带有on类名的li，存在上面定义的oneulli中
            oneulli=this

            //ol也是差不多操作
            // 带active类名去掉
            oneolli.className=''
            // 给当前li对应的图片所在的li添加active类名
            olist[i].className='active'
            // 带有active类名，就存在oneolli变量中
            oneolli = olist[i]
        }
    })(i)

}