原生JS选项卡案例——tab切换

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

h_jQuery

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

阅读量229

点赞数

分类专栏： javascript HTML HTML5 文章标签： js css html javascript html5

本文链接：https://blog.csdn.net/h_jQuery/article/details/118602999

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul {
            overflow: hidden;
        }
        
        li {
            width: 100px;
            height: 40px;
            background-color: #eee;
            border: 1px solid #ccc;
            float: left;
            line-height: 40px;
            text-align: center;
        }
        
        .box {
            width: 406px;
            height: 406px;
            border: 1px solid #ccc;
        }
        
        .box img {
            width: 406px;
            height: 406px;
            display: none;
        }
        
        .active {
            background-color: orange;
            border: none;
        }
    </style>
</head>

<body>
    <ul>
        <li class="active">大橘</li>
        <li>英短</li>
        <li>美短</li>
        <li>布偶</li>
    </ul>
    <div class="box">
        <img src="./img/ju.jpg" style="display: block;">
        <img src="./img/ying.jpg" alt="">
        <img src="./img/hu.jpg" alt="">
        <img src="./img/bu.jpg" alt="">
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        var imgs = document.querySelectorAll('img');

        // console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            // 设置index（添加index属性）：li的索引
            lis[i].index = i;
            // 点击li切换图片
            lis[i].onclick = function() {
                // index：点击的li的索引
                // console.log(this.index);
                // 在这里加样式，每点击一个就会添加样式，这样所有li都会添加样式了，不消除
                // this.className = 'active'
                // 添加一个循环，清除所有li\img的样式
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                    imgs[i].style.display = 'none';
                }
                // 点击，清除旧样式之后，就重新添加样式
                this.className = 'active';
                // console.log(imgs[this.index]);
                imgs[this.index].style.display = 'block';
            }
        }
        /*
		// 1.鼠标移动到那个选项卡，它的背景色也随之改变；2.对应的图片显示
        // 移出时，背景色恢复，该对应的图片隐藏
        // 循环tab栏
        for (let i = 0; i < lis.length; i++) {
            // 将当前li的索引赋给index属性（元素数组下标设置）
            lis[i].index = i;
            // 鼠标经过tab子项
            lis[i].onmouseover = function() {
                // 先将所有的li的样式清除
                // 将所有图片隐藏，再让对应的图片出现
                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                    imgs[i].style.display = 'none'
                }
                // 添加样式,将对应的图片显示
                this.className = 'active'
                imgs[i].style.display = 'block'
            }
        }
		*/
    </script>
</body>

</html>

效果图：
在这里插入图片描述

h_jQuery

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生JS选项卡案例——tab切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选项
复制链接

扫一扫