<!doctype html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<meta name="viewport"
?????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
???<meta http-equiv="X-UA-Compatible" content="ie=edge">
???<title>Document</title>
???<style>
???????.tab {
???????}
???????.tab-son1 {
???????????overflow: hidden;
???????}
???????.tab-son1 .tab-son1-son{
???????????float: left;
???????????margin-left: 20px;
???????????padding: 5px 15px;
???????????/*background: red;*/
???????????cursor: pointer;
???????????text-align: center;
???????}
???????.tab-son2 {
???????????margin-top: 60px;
???????}
???????.tab-son2 .tab-son2-son {
???????????display: none;
???????}
???????.tab-son2 .tab-son2-sonactive {
???????????display: block;
???????}
???????.tab .tab-son1 .tab-son1-sonactive{
???????????background: red;
???????????color: #fff;
???????}
???</style>
</head>
<body>
<div id="text" value="123" data-name="黑哒哒的盟友"></div>
<div class="tab">
???<div class="tab-son1">
???????<span class="tab-son1-son tab-son1-sonactive" data-id="one">tab1</span>
???????<span class="tab-son1-son " data-id="two">tab2</span>
???????<span class="tab-son1-son" data-id="three">tab3</span>
???</div>
???<div class="tab-son2">
???????????<div class="tab-son2-son tab-son2-sonactive tab-son2-son1" id="one">第一个内容</div>
???????????<div class="tab-son2-son tab-son2-son2" id="two">第2个内容</div>
???????????<div class="tab-son2-son tab-son2-son3" id="three">第3个内容</div>
???</div>
</div>
<script src="./jquery-3.3.1.js"></script>
<script>
???console.log($("#text").data("name"));
???$(‘.tab .tab-son1 ?.tab-son1-son‘).click(function () {
???????$(this).addClass(‘tab-son1-sonactive‘).siblings().removeClass(‘tab-son1-sonactive‘);
???????$(‘.tab-son2 .tab-son2-son‘).hide();
???????$(‘#‘+$(this).data(‘id‘)).show();
???});
</script>
</body>
</html>
自定义属性tab复制就可以用 把Jquery.js路劲换一下
原文地址：https://www.cnblogs.com/shenbo666/p/9699233.html