采用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>效果图如下：
时间： 2024-10-08 23:10:31