index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="style.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="tab.js"></script>
</head>
<body>
<div class="tab-node">
<div class="tab-head">
<div class="tab-head-item tab-head-player">江南</div>
<div class="tab-head-item">凉州词</div>
<div class="tab-head-item">王翰《凉州词》1</div>
<div class="tab-head-item">王翰《凉州词》2</div>
<div class="tab-head-item">王翰《凉州词》3</div>
</div>
<div class="tab-body">
<div class="tab-body-item tab-body-player">
汉乐府《江南》<br/> 江南可采莲，<br/>莲叶何田田。<br/>鱼戏莲叶间。<br/>鱼戏莲叶东，<br/>鱼戏莲叶西，<br/>鱼戏莲叶南，<br/>鱼戏莲叶北。
</div>
<div class="tab-body-item">
王之涣《凉州词》<br/> 黄河远上白云间，<br/>一片孤城万仞山。<br/>羌笛何须怨杨柳，<br/>春风不度玉门关。
</div>
<div class="tab-body-item">
王翰《凉州词》1<br/> 葡萄美酒夜光杯，<br/> 欲饮琵琶马上催。<br/> 醉卧沙场君莫笑，<br/> 古来征战几人回？
</div>
<div class="tab-body-item">
王翰《凉州词》2<br/> 葡萄美酒夜光杯，<br/> 欲饮琵琶马上催。<br/> 醉卧沙场君莫笑，<br/> 古来征战几人回？
</div>
<div class="tab-body-item">
王翰《凉州词》3<br/> 葡萄美酒夜光杯，<br/> 欲饮琵琶马上催。<br/> 醉卧沙场君莫笑，<br/> 古来征战几人回？
</div>
</div>
</div>
</body>
</html>
tab.js
$(function(){
//添加点击监听事件
$(".tab-head-item").on('click',function(){
tab_onclick(this,$(this).index());
});
});
function tab_onclick(e,index){
$(".tab-node .tab-body .tab-body-item").removeClass('tab-body-player');
$(".tab-node .tab-head .tab-head-item").removeClass('tab-head-player');
$($(".tab-node .tab-body .tab-body-item").get(index)).addClass('tab-body-player');
$($(".tab-node .tab-head .tab-head-item").get(index)).addClass('tab-head-player');
}
style.css
body{font-family:微软雅黑;font-size:1rem;}
.tab-node{border:solid 1px #ddd;padding:5px;box-shadow: 1px 1px 5px #ddd;}
.tab-node .tab-head {}
.tab-node .tab-head .tab-head-item{display:inline-block;margin-top: 8px;padding: 10px 5px;box-shadow:1px 1px 3px #ddd;background-color:#fcfcfc;min-width:4rem;}
.tab-node .tab-head .tab-head-item:hover:not(.tab-head-player){background-color:#F1F1F1;}
.tab-node .tab-head .tab-head-item{cursor:pointer;}
.tab-node .tab-head .tab-head-player{color:#42CFFD;background-color:#fff;cursor:Default;}
.tab-node .tab-body{padding:10px;}
.tab-node .tab-body .tab-body-item{display:none;opacity:0;}
.tab-node .tab-body .tab-body-player{display:block;opacity:1;}
Paste_Image.png
