tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.tab{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    margin: 50px auto;
}
.tab ul, .tab ol{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.tab ul{
    height: 50px;
    background-color: #eee;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.tab ul li{
    width: 100px;
    height: 30px;
    background-color: #abcdef;
    text-align: center;
    line-height: 30px;
}
.tab ul li.active{
    background-color: #f00;
    color: #fff;
}
.tab ol{
    width: 600px;
    height: 250px;
}
.tab ol li a img{
    width: 600px;
    height: 250px;
}
.tab ol li{
    display:none;
}
.tab ol li.active{
    display:block;
}
.tab{
    cursor: pointer;
}
</style>
<body>
<div class="tab">
    <ul>
        <li class="active">向日葵</li>
        <li>郁金香</li>
        <li>红玫瑰</li>
    </ul>
    <ol>
        <li class="active">
            <a href="./images/1.jfif">
                <img src="./images/1.jfif" alt="">
            </a>
        </li>
        <li>
            <a href="./images/2.webp">
                <img src="./images/2.webp" alt="">
            </a>
        </li>
        <li>
            <a href="./images/3.jfif">
                <img src="./images/3.jfif" alt="">
            </a>
        </li>
    </ol>
</div>
</body>
<script>
// 需要给上面的ul下的3个li绑定事件

// 点击
// 将所有的li的active去掉
// 给当前点击的li添加active类名

// 将ol下li的active都去掉
// 给对应 - 下标相同的 的ol下的li添加active

var ulis = document.querySelectorAll('.tab ul li');
var olis = document.querySelectorAll('.tab ol li');





for(let i=0;i<ulis.length;i++){
    ulis[i].onclick = function(){
        // 将所有的active去掉
        for(var j=0;j<ulis.length;j++){
            ulis[j].className = ''
            olis[j].className = ''
        }
        ulis[i].className = 'active'
        olis[i].className = 'active'
    }
}
</script>
</html>

第二种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.tab{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    margin: 50px auto;
}
.tab ul, .tab ol{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.tab ul{
    height: 50px;
    background-color: #eee;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.tab ul li{
    width: 100px;
    height: 30px;
    background-color: #abcdef;
    text-align: center;
    line-height: 30px;
}
.tab ul li.active{
    background-color: #f00;
    color: #fff;
}
.tab ol{
    width: 600px;
    height: 250px;
}
.tab ol li a img{
    width: 600px;
    height: 250px;
}
.tab ol li{
    display:none;
}
.tab ol li.active{
    display:block;
}
.tab{
    cursor: pointer;
}
</style>
<body>
<div class="tab">
    <ul>
        <li class="active">向日葵</li>
        <li>郁金香</li>
        <li>红玫瑰</li>
    </ul>
    <ol>
        <li class="active">
            <a href="./images/1.jfif">
                <img src="./images/1.jfif" alt="">
            </a>
        </li>
        <li>
            <a href="./images/2.webp">
                <img src="./images/2.webp" alt="">
            </a>
        </li>
        <li>
            <a href="./images/3.jfif">
                <img src="./images/3.jfif" alt="">
            </a>
        </li>
    </ol>
</div>
</body>
<script>
// 需要给上面的ul下的3个li绑定事件

// 点击
// 将所有的li的active去掉
// 给当前点击的li添加active类名

// 将ol下li的active都去掉
// 给对应 - 下标相同的 的ol下的li添加active

var ulis = document.querySelectorAll('.tab ul li');
var olis = document.querySelectorAll('.tab ol li');
for(var i=0;i<ulis.length;i++){
    (function(i){
        ulis[i].onclick = function(){
            // 将所有的active去掉
            for(var j=0;j<ulis.length;j++){
                ulis[j].className = ''
                olis[j].className = ''
            }
            // 给当前li添加active
            ulis[i].className = 'active'
            olis[i].className = 'active'
            
        }
    })(i)
}

</script>
</html>