<!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;
100%;
height: 25px;
line-height: 25px;
padding-bottom: 1px;
}
.header-tab {
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;
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>