DOM：手机底部导航切换效果

总结了两种方法：

方法一：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>

<body>
    <style>
        .content {
            width: 350px;
            height: 500px;
            background-color: goldenrod;
        }

        .view {
            width: 350px;
            height: 400px;
            background-color: palegreen;
        }

        .tabbar {
            width: 350px;
            height: 100px;
            background-color: goldenrod;
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }

        .btn {
            width: 25%;
            background-color: gainsboro;
            cursor: pointer;
            position: relative;
        }

        .btn:first-child {
            background-color: skyblue;
        }

        .viewconent {
            width: 350px;
            height: 400px;
            background-color: palegreen;
            display: none;
        }

        .viewconent:first-child {
            display: block;
        }

        #img1 {
            visibility: visible;
            display: block;
            height: 40px;
            width: 40px;
        }

        #img2 {
            position: absolute;
            visibility: hidden;
            display: block;
            height: 40px;
            width: 40px;
            top: 20px;
        }
    </style>

    <div class="content">
        <div class="view">
            <div class="viewconent">home</div>
            <div class="viewconent">car</div>
            <div class="viewconent">my</div>
            <div class="viewconent">set</div>
        </div>
        <div class="tabbar">
            <div class="btn">
                <span>home</span>
                <img id='img1' src="./icon_grey/homefill.png" alt="">
                <img id="img2" src="./icon_skyblue/homefill.png" alt="">
            </div>
            <div class="btn">
                <span>car</span>
                <img id='img1' src="./icon_grey/cartfill.png" alt="">
                <img id="img2" src="./icon_skyblue/cartfill.png" alt="">
            </div>
            <div class="btn">
                <span>my</span>
                <img id='img1' src="./icon_grey/myfill.png" alt="">
                <img id="img2" src="./icon_skyblue/myfill.png" alt="">
            </div>
            <div class="btn">
                <span>set</span>
                <img id='img1' src="./icon_grey/setting-fill.png" alt="">
                <img id="img2" src="./icon_skyblue/setting-fill.png" alt="">
            </div>
        </div>
    </div>

    <script>
        var tabbarbtns = document.querySelectorAll(".tabbar .btn");//获取每个底部的类名
        tabbarbtns.forEach((el, index) => {
            // console.log(el);//测试是否成功引入的实参
            el.onclick = function () {
                tabbarbtns.forEach((el2) => { el2.style.backgroundColor = "gainsboro"; })//获取点击事件，遍历每个底部分别设置背景颜色
                el.style.backgroundColor = "skyblue";//将点击的部分背景颜色变为蓝色
                //1.获取点击了第x个按钮index/el.indexof1()
                //2.把内容区域的所有的隐藏 把内容区域的第x个显示
                var viewconents = document.querySelectorAll(".viewconent");//获取所有的视图页面
                viewconents.forEach((el3) => { el3.style.display = "none" });//将所有的都设置为不展示
                viewconents[index].style.display = "block";//将点击的部分对应的视图设置为可看见
                var img2 = document.querySelectorAll('#img2');
                img2.forEach((el4,index) => { el4.style.visibility = "hidden" });
                img2[index].style.visibility = "visible";
            }
        })
    </script>
</body>

</html>

方法二：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>

<body>
    <style>
        .content {
            width: 350px;
            height: 500px;
            background-color: goldenrod;
        }

        .view {
            width: 350px;
            height: 400px;
            background-color: palegreen;
        }

        .tabbar {
            width: 350px;
            height: 100px;
            background-color: goldenrod;
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }

        .btn {
            width: 25%;
            background-color: gainsboro;
            cursor: pointer;
            position: relative;
        }

        .btn:first-child {
            background-color: skyblue;
        }

        .viewconent {
            width: 350px;
            height: 400px;
            background-color: palegreen;
            display: none;
        }

        .viewconent:first-child {
            display: block;
        }

        #img1 {
            visibility: visible;
            display: block;
            height: 40px;
            width: 40px;
        }

        #img2 {
            position: absolute;
            visibility: hidden;
            display: block;
            height: 40px;
            width: 40px;
            top: 22px;
        }
    </style>

    <div class="content">
        <div class="view">
            <div class="viewconent">home</div>
            <div class="viewconent">car</div>
            <div class="viewconent">my</div>
            <div class="viewconent">set</div>
        </div>
        <div class="tabbar">
            <div class="btn">
                <span>home</span>
                <img id='img1' src="./icon_grey/homefill.png" alt="">
            </div>
            <div class="btn">
                <span>car</span>
                <img id='img1' src="./icon_grey/cartfill.png" alt="">
            </div>
            <div class="btn">
                <span>my</span>
                <img id='img1' src="./icon_grey/myfill.png" alt="">
            </div>
            <div class="btn">
                <span>set</span>
                <img id='img1' src="./icon_grey/setting-fill.png" alt="">
            </div>
        </div>
    </div>
    <script>
        var arr = [
            { img4: './icon_skyblue/homefill.png', img3: './icon_grey/homefill.png' },
            { img4: './icon_skyblue/cartfill.png', img3: './icon_grey/cartfill.png' },
            { img4: './icon_skyblue/myfill.png', img3: './icon_grey/myfill.png' },
            { img4: './icon_skyblue/setting-fill.png', img3: './icon_grey/setting-fill.png' }
        ];
        var imgs = document.querySelectorAll(".btn #img1");
        console.log(imgs);
        var tabbarbtns = document.querySelectorAll(".tabbar .btn");
        tabbarbtns.forEach((el, index) => {
            el.onclick = function () {
                tabbarbtns.forEach((el2) => { el2.style.backgroundColor = "gainsboro"; })
                el.style.backgroundColor = "skyblue"
                var viewconents = document.querySelectorAll(".viewconent")
                viewconents.forEach((el3) => { el3.style.display = "none" })
                viewconents[index].style.display = "block"

                imgs.forEach((el, index) => { el.src = arr[index].img3 });
                imgs[index].src = arr[index].img4;
            }
        })

    </script>
</body>

</html>

posted on 2022-07-14 23:25 香香鲲阅读(61) 评论(0) 收藏举报