<!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>