jquery 选项卡

最新推荐文章于 2022-10-24 17:31:20 发布

elegancy_

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量263

点赞数

<pre name="code" class="html"><!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<script src="jQuery/jquery-1.8.2.min.js"></script>
<style>
.active{background:#ff0;}
.cont div{background:#ccc;width:200px;height:150px;display:none;}
</style>
<script>
$(function(){
	$('.input input').click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		$('.cont div').eq($(this).index()).show().siblings().hide();
	});	
});
</script>
</head>
<body>
<div id="div1">
    <div class="input">
        <input type="button" class="active" value="教育">
        <input type="button" value="培训">
        <input type="button" value="招生">
        <input type="button" value="出国">
    </div>
    <div class="cont">
        <div style="display:block;">11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>
</div>
</body>
</html>

效果图：