前言
今天突然接到公司需求，说是要用原生写一个公司官网的页面，写到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>
实现效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79393.html
