原生js实现导航栏切换和点击更改折叠高度

夏*想想

已于 2022-07-12 18:34:56 修改

阅读量622

点赞数

分类专栏：前端小demo 文章标签： javascript 前端

于 2022-06-27 18:06:30 首次发布

本文链接：https://blog.csdn.net/m0_55173487/article/details/125488483

版权

前端小demo 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

闲来无事来回顾js。经过上一次发文，这次变得大胆一点了，有改正的地方还望大佬能留言指正，万分感谢！

一、使用的技术：js+css+html

二、功能描述：

导航栏：点击可以切换内容

折叠按钮：根据点击次数来实现折叠的范围

三、实现的效果：

导航切换+根据点击次数折叠

四、代码

1、html部分

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航切换+点击更改折叠内容</title>
</head>

<body>
    <div class="block" id="tab">
        <!-- 一般这里是个点击的图标 -->
        <div class="top" id="topId">
            <div id="btn">点击</div>
        </div>
        <div class="tab-content" id="contentId">
            <div class="content  cur">
                首页内容
            </div>
            <div class="content ">
                商品内容
            </div>
            <div class="content ">
                购物车内容
            </div>
            <div class="content ">
                我的内容
            </div>
        </div>
        <ul class="tab-nav" id="fId">
            <li class="cur">首页</li>
            <li>商品</li>
            <li>购物车</li>
            <li>我的</li>
        </ul>
    </div>
</body>

</html>

2、css部分


            * {
            padding: 0;
            margin: 0;
        }
        #tab {
            /* width: 300px; */
            margin: 30px auto;
            width: 400px;
            height: 600px;
            position: relative;
            /* background: rgba(0, 0, 0, 0.5); */
        }
        .tab-nav {
            width: 100%;
            height: 40px;
            position: absolute;
            left: 0;
            bottom: 0;

            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #343434;
            color: #fff;
        }
        .tab-nav li.cur {
            color: #fff;
            background: #00f;
        }
        .top {
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            background-color: #8a5a5a;
            text-align: center;
            margin-bottom: 20px;
            border-bottom: solid 1px #343434;
            color: #fff;
        }
        li {
            list-style: none;
            /* width: 100px; */
            flex: 1;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-left: 10px;
            box-sizing: border-box;
        }

        li:nth-of-type(1) {
            margin-left: 0;
        }
        .content {
            display: none;
            width: 100%;
            height: 300px;
            color: #fff;
            box-sizing: border-box;
            padding: 10px;
            background-color: pink;
        }
        .content.cur {
            display: block;
        }

3、js部分

 var num = 0
    var oTab = document.getElementById('tab');
    var oTop = document.getElementById("topId");
    var aTabNav = oTab.querySelectorAll('.tab-nav li');
    var aTabContent = oTab.querySelectorAll('.tab-content .content');

    var oldContentHeight = document.getElementById("contentId").offsetHeight//内容区域的
    var oldTopeight = oTop.offsetHeight//具体内容
    var oldBlockHeight = oTab.offsetHeight//整个大的区域
    var oldFooterHeight = document.getElementById("fId").offsetHeight//底部高度

    // 点击底部导航切换内容
    for (var i = 0; i < aTabNav.length; i++) {   // 遍历Tab选项
        aTabNav[i].onclick = (function (i) {   // Tab选项绑定点击事件
            num = 0
            console.log(num);
            return function () {
                // 清除所有Tab选项的标记样式
                for (var j = 0; j < aTabNav.length; j++) {
                    aTabNav[j].classList.remove('cur');
                }
                aTabNav[i].classList.add('cur');
                // 清除所有Tab选项内容的显示样式
                for (j = 0; j < aTabContent.length; j++) {
                    aTabContent[j].classList.remove('cur');
                }
                aTabContent[i].classList.add('cur');
            }
        })(i);
    }

    // 点击点击盒子收缩document.getElementById("topId")
    document.getElementById('btn').onclick = function () {
        num += 1
        if (num === 1) {
            // 大区域需要变化：内容高度+底部高度+头部高度（注意内容的外边距或者内边距或者边框，需要加上）
            var changeHeight = oldContentHeight + oldFooterHeight + oldTopeight
            document.getElementById("tab").style.height = changeHeight + 30 + "px"
        } else if (num === 2) {
            // 点击第二下：block高度=头部高度+底部高度   注意需要隐藏内容
            var changeHeight = oldFooterHeight + oldTopeight
            document.getElementById("tab").style.height = changeHeight + "px"
            document.getElementById("contentId").style.display = "none"
        } else if (num === 3) {
            // 点击第三下：恢复初始状态
            document.getElementById("tab").style.height = oldBlockHeight + "px"
            document.getElementById("contentId").style.display = "block"
            num = 0
        }
    }

五、补充说明

实际使用脚手架开发中，在切换导航时可以通过监听路由变化，来初始折叠前最开始的的高度和样子