实现切换按钮

最新推荐文章于 2024-04-27 14:07:16 发布

流灬

最新推荐文章于 2024-04-27 14:07:16 发布

阅读量391

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_41625074/article/details/105084418

版权

笔记专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            width:200px;
            height:20px;
            overflow:hidden;
        }
        li{
            box-sizing:border-box;
            list-style:none;
            float:left;
            width:20px;
            height:20px;
            margin:0 10px 0 10px;
            border-radius:10px;
            text-align:center;
            line-height:20px;
            background:white;
            border:1px solid #000000;
        }
        div{
            width:40px;
            height:100px;
            float:left;
            background:red;
            visibility:hidden;
            
        }
    </style>
</head>
<body>
    <ul>
        <li id="li1">1</li>
        <li id="li2">2</li>
        <li id="li3">3</li>
        <li id="li4">4</li>
        <li id="li5">5</li>
    </ul>
    <div id="div1">1111</div>
    <div id="div2">2222</div>
    <div id="div3">3333</div>
    <div id="div4">4444</div>
    <div id="div5">5555</div>
    <script>
        var prevDiv,prevDot;
        init();
        function init(){
            for(i=1;i<6;i++){
                var li=document.getElementById("li"+i);
                li.onclick=clickHeadler;
            }
        }
        function clickHeadler(){
            var div=getDiv(this);
            changeDiv(div);
            changeLi(this);
        }
        function getDiv(li){
            if(li===li1) return document.getElementById("div1");
            if(li===li2) return document.getElementById("div2");
            if(li===li3) return document.getElementById("div3");
            if(li===li4) return document.getElementById("div4");
            if(li===li5) return document.getElementById("div5");
        }
        function changeDiv(div){
            if(prevDiv!==undefined){
                prevDiv.style.visibility="hidden";
            }
            prevDiv=div;
            div.style.visibility="visible";
        }
        function changeLi(li){
            if(prevDot!==undefined){
                prevDot.style.background="white";
            }
            prevDot=li;
            li.style.background="yellow";
        }
    </script>
</body>
</html>

整体思路：要实现当点击小圆点后，对应的盒子显示并且小圆点的颜色改变
init函数
1.通过循环六轮，每轮通过document.getElementById方法获取当下小圆点元素，并通过点击事件给每个小圆点元素
绑定点击事件。虽然这里的变量li的值每次循环都会变化，但是每轮绑定点击事件的是对应的那个小圆点对象

clickHeadler函数
2.因为点击事件里包括几件事情，所以用一个函数给包起来，此时这个函数里调用的函数与点击事件所绑定的元素
的联系全靠this，this指向触发点击事件的对象

getDiv函数
3.这个函数是为了使点击的小圆点和对应的盒子联系起来，通过判断传入的实参是哪个小圆点{（即id===id)id
就可以找到那个独有的对象，这里的id就是代表了那个元素（对象）名}*来返回对应的盒子，这里先通过
document.getElementById方法获取当下元素才返回的

changeDiv函数
4.这个函数通过传入的盒子对象名来控制盒子的显示，通过改变div.style.visibility属性值来做到
但是有一点注意，因为这里如果只控制显示的话，那么到后面点击的小圆点对应的盒子都会显示，达不到想要的效果
所以需要在对当前盒子进行操作前需要先把前一个盒子的显示恢复原样。通过prevDiv这个中间变量能够记录当前盒子，
轮到下一轮调用函数时，就可以利用它来把前一个盒子的显示恢复原样（判断它是否为undefined,因为只要调用了，
它就是一个对象）

changeLi函数
5.和4的思路一样。

效果图：