js原生实现tab标签切换（可滑动）
Posted 水星记_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js原生实现tab标签切换（可滑动）相关的知识，希望对你有一定的参考价值。
前言
今天突然接到公司需求，说是要用原生写一个公司官网的页面，写到tab切换时，觉得这个玩意挺有意思的，下面分享给大家。
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab标签（可滑动）</title>
<style type="text/css">
*
/* 全局清除浏览器自带内外边距 */
margin: 0;
padding: 0;
.navTitle
/* 移动端下标题可滚动 */
display: flex;
white-space: nowrap;
overflow-y: hidden;
.navTitle::-webkit-scrollbar
/* 移动端下自带滚动条隐藏 */
display: none;
.navTitle li
/* 标题的样式 */
display: inline-block;
cursor: pointer;
text-align: center;
height: 46px;
width: 80px;
line-height: 52px;
.contantBox li
/* 标题的样式 */
list-style: none;
width: 275px;
border: 1px solid #ccc;
height: 200px;
border-top: none;
.roofBox .navTitle li.active
/* 选中后的样式 */
border-bottom: 2px solid cornflowerblue;
.contantBox li
/* 默认内容隐藏 */
display: none;
.contantBox li:first-child
/* 默认展示第一个内容 */
display: block;
</style>
</head>
<body>
<!-- 外层最大的盒子 -->
<div class="roofBox">
<!-- 顶部标题 -->
<ul class="navTitle barStyle">
<li class="active">公司简介</li>
<li>公司文化</li>
<li>发展历程</li>
<li>业务架构</li>
<li>行业范围</li>
<li>主要客户</li>
<li>合作伙伴</li>
</ul>
<!-- 标题对应内容 -->
<ul class="contantBox">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<!-- 引入js库 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function ()
// 为类名navTitle下的所有li添加点击事件
$(".navTitle").on("click", "li", function ()
// 设置下标为当前点击的下标
let index = $(this).index();
// 点击时为类名（active）添加样式，同时利用siblings方法清除其他同级样式
$(this).addClass("active").siblings().removeClass("active");
// 让其显示或者隐藏
$(this).parents(".roofBox").find(".contantBox li").eq(index).show().siblings().hide();
)
)
</script>
</body>
</html>
实现效果
以上是关于js原生实现tab标签切换（可滑动）的主要内容，如果未能解决你的问题，请参考以下文章