tab欄切換2
阿新 • • 發佈：2017-12-05
class 圖片 ima com res one -h lock clas
采用jquery.js，通過添加類名和show()、hide()方法實現tab欄切換；
簡單案例如下：
HTML部分
<style>
li{list-style: none;}
#wrap{width: 500px;height: 400px;border: 1px solid #000;}
#resourcesTab li{width: 100px;height: 40px;line-height: 40px;font-size: 18px;font-weight: bold;
cursor: pointer;text-align: center;margin-left: -40px;}
#resourcesTab .select{color: red;background-color: #fff3ca;}
#resourcesL{width: 100px;border: 1px solid #000;float: left;}
#resourcesR{width: 396px;height: 400px;border: 1px solid #000;float: left;}
#resourcesR .divContent{display: none;border-left: 1px solid #ccc;}
#resourcesR .resourcesDiv{display: block;border-left: 1px solid #ccc;}
</style>
<body>
<div id="wrap">
<div id="resourcesL">
<ul id="resourcesTab">
<li class="select">資源</li>
<li>進程</li>
<li>業務</li>
</ul>
</div>
<div class="resourcesR" id="resourcesR">
<div class="divContent resourcesDiv ">內容1</div>
<div class="divContent">內容2</div>
<div class="divContent">內容3</div>
</div>
</div>
</body>
script部分：
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(‘#resourcesTab li‘).click(function() {
var i = $(this).index();//獲取索引index
$(this).addClass(‘select‘).siblings().removeClass(‘select‘);
$(‘#resourcesR .divContent‘).eq(i).show().siblings().hide()
.removeClass(‘resourcesDiv‘).siblings().addClass(‘resourcesDiv‘);
});
</script>
效果圖如下：
tab欄切換2