<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        /* 控制其显示和隐藏 */
        .show {
            display: block !important;
        }

        .header {
            overflow: hidden;
            height: 25px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            padding-bottom: 1px;
        }

        .header-tab {
            width: 100%;
            display: flex;
            overflow: hidden;
            white-space: nowrap;
            overflow-x: scroll;
            background-color: pink;
            white-space: nowrap;
            font-size: 15px;
        }

        .header-tab li {
            cursor: pointer;
            margin-left: 6px;
        }

        .wrapper {
            height: 600px;
            width: 100%;
            margin: 0 auto;
        }

        /* 其子元素为隐藏状态 */
        .wrapper>div {
            display: none;
        }

        /* 隐藏滚动条 */
        .header-tab::-webkit-scrollbar {
            display: none
        }

        /* 添加下划线 */
        .add2line {
            color: #3385ff;
            border-bottom: 1px solid #3385ff;
        }
    </style>
</head>

<body>
    <nav class="header">
        <ul class="header-tab" id="box">
            <li class="add2line">更新内容</li>
            <li>关注</li>
            <li>热点</li>
            <li>要闻</li>
            <li>我的生活</li>
            <li>国际新闻</li>
            <li>态度公开课</li>
            <li>新时代</li>
            <li>抖音视频</li>
        </ul>
    </nav>
    <main class="wrapper">
        <div class="show content">
            页面1
        </div>
        <div class="content">
            页面2
        </div>
        </div>
        <div class="content">
            页面3
        </div>
        <div class="content">
            页面4
        </div>
        <div class="content">
            页面5
        </div>
        <div class="content">
            页面6
        </div>
        <div class="content">
            页面7
        </div>
        <div class="content">
            页面8
        </div>
        <div class="content">
            页面9
        </div>
    </main>
</body>

</html>
<script>
    window.onload = function () {
        var doc = document
        isShow()
        function isShow() {
            var liArr = doc.querySelectorAll('#box > li')
            var divArr = doc.querySelectorAll('.wrapper .content')
            for (var i = 0; i < liArr.length; i++) {
                liArr[i].index = i;
                liArr[i].onclick = function () {
                    for (var j = 0; j < liArr.length; j++) {
                        liArr[j].className = ''
                        divArr[j].className = ''
                    }
                    divArr[this.index].className = 'show'
                    liArr[this.index].className = 'add2line'
                }
            }
        }
        // 当前视窗的宽度
        var WINDOW_OFFSETWIDTH = doc.documentElement.clientWidth
        var liArr = doc.querySelectorAll('#box > li')
        for (var i = 0; i < liArr.length; i++) {
            liArr[i].addEventListener('click', function (e) {
                // 获取当前点击元素的宽度
                var itemWidth = this.offsetWidth
                // 当前事件对象相对移动的距离
                var moveX = e.target.offsetLeft
                // 目标居中的距离 = (当前元素距离左边的相对距离 / 2)+ (视口距离 / 2)
                var left = moveX - (WINDOW_OFFSETWIDTH / 2) + (itemWidth / 2)
                doc.getElementById('box').scrollLeft = left
            })
        }
    }
</script>

版权声明：本文为xiaojuziya原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaojuziya/p/12160142.html