JavaScript（六）（Js2）示例

最新推荐文章于 2023-02-17 13:31:16 发布

ERiver_Anthony

最新推荐文章于 2023-02-17 13:31:16 发布

阅读量533

点赞数 1

文章标签： JavaScript

本文链接：https://blog.csdn.net/ERiver_Anthony/article/details/100025774

版权

<!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>Document</title>
    <script src="js/domtool.js"></script>
</head>
<style>
    .ss {
        width: 300px;
        height: 600px;
        margin: 0 auto;
        position: relative;
        border: 1px solid red
    }

    .s1 {
        width: 300px;
        height: 550px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: red;
        display: none;

    }

    .s2 {
        width: 300px;
        height: 550px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: greenyellow;
        display: none;

    }

    .s3 {
        width: 300px;
        height: 550px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: gray;
        display: none;

    }

    .s4 {
        width: 300px;
        height: 550px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #84C7EC;
        display: none;

    }

    .s5 {
        width: 300px;
        height: 20px;
        position: absolute;
        left: 0;
        bottom: 0;

        justify-content: space-around;
        display: flex;
    }

    .s5>input {
        width: 50px;
        height: 20px;

    }

    .show {
        display: block !important;
    }
</style>

<body>
    <div class="ss">
        <div class="s1 show item">1</div>
        <div class="s2 item">2</div>
        <div class="s3 item">3</div>
        <div class="s4 item">4</div>
        <div class="s5">
            <input type="button" class="btn1" value="First">
            <input type="button" class="btn1" value="Two">
            <input type="button" class="btn1" value="Three">
            <input type="button" class="btn1" value="Four">
        </div>
    </div>

    <script>
        // var btn1=document.querySelector(".btn1");
        // var btn2=document.querySelector(".btn2");
        // var btn3=document.querySelector(".btn3");
        // var btn4=document.querySelector(".btn4");
        // var s1=document.querySelector(".s1");
        // var s2=document.querySelector(".s2");
        // var s3=document.querySelector(".s3");
        // var s4=document.querySelector(".s4");
        // btn1.onclick=function(){
        //     s1.style.display="block";
        //     s2.style.display="none";
        //     s3.style.display="none";
        //     s4.style.display="none";
        // }
        // btn2.onclick=function(){
        //     s1.style.display="none";
        //     s2.style.display="block";
        //     s3.style.display="none";
        //     s4.style.display="none";
        // }
        // btn3.onclick=function(){
        //     s1.style.display="none";
        //     s2.style.display="none";
        //     s3.style.display="block";
        //     s4.style.display="none";
        // }
        // btn4.onclick=function(){
        //     s1.style.display="none";
        //     s2.style.display="none";
        //     s3.style.display="none";
        //     s4.style.display="block";
        // }

        //上面的这么长实际上就是模拟了下面函数的过程
        //所以啊记得，思维第一，其次才是代码，不过写之前要先熟悉方法（这个重要！）

        var btn1 = document.querySelectorAll(".btn1");//选中所有按钮
        var item = document.querySelectorAll(".item");//选中所有div（即你要展示的内容板块）

        btn1.forEach((el) => {  //先遍历所有的btn1
            el.onclick = function () { //遍历实际上有很多遍，也就是说遍历到的btn1都有点击事件的这个函数
                var index = el.indexOffather()//这里是获取点击的btn1在该父元素的位置下标，封装的方法我在下面给你们解释
                item.forEach((el) => { el.classList.remove("show") })//这里是遍历所有item，实际上是div，不过div有item这个属性
                //这是上面这行代码的接着的解释：当我遍历完item之后，将所有的含有item类名的div的show类名删除掉
                item[index].classList.add("show")//然后再给我点击的，即选择的对应下标的这个div加上show类名并产生效果
            }//这里先让所有要显示内容的div都隐藏，在点击事件之后给对应的div加上show（就是设置display：block让隐藏的显示出来）
        })
    </script>
    <script>
        Object.prototype.indexOffather = function () {//将这个方法
            for (var i = 0; i < this.parentElement.children.length; i++) {//this.parentElement.children这里是选中其父元素的子元素的长度作为循环次数的上限
                if (this.parentElement.children[i] == this) {//这里就是判断遍历的元素和调用者是否相同，当相同之后，也就是找到自己在第几个元素后，返回自己的下标
                    return i
                }
            }
        }
        //总的思路就是排他与交替设计的应用，代码看不懂要先琢磨思想，通了有思路剩余就是方法的问题
        //及时复习，每个知识点都熟悉组合设计起来就不会卡，尽量可以给身边的讲，可以发现自己的盲区
        //加油hhhh
    </script>
</body>

</html>

在这里插入图片描述
就是点击每个按钮上面的显示内容会变化，这里就是很经典的交替设计和排他设计的结合,加上foreach的遍历和我自己封装的方法，可以简单的的实现一个这么效果

<!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>Document</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.s1{
    width: 100px;
    height: 50px;
    background-color: blue;
}
.s2{
    width: 100px;
    height: 450px;
    background-color: red;
    display: none;
}
</style>
<body>
    <div class="s1"></div>
    <div class="s2">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>
    <script>
        var s1=document.querySelector(".s1")
        var s2=document.querySelector(".s2")
        var flag=true;
        s1.onclick=function(){
            flag=!flag;
            if(flag==true){
                s2.style.display="block";
            }
            else{
                s2.style.display="none";
            }
        }
    </script>
</body>

</html>

这里是点击后产生下拉菜单，再点击就消失，是交替（或者是开关）设计思想的一个简单体现，图就不截了，算了还是截吧（神经病！！！反正也没人看到hhh）
在这里插入图片描述