首页 > 代码库 > 选项卡切换
选项卡切换
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选项卡切换</title>
<style>
.sec{border:1px solid #000;width:100px;height:100px;display:none}
.news{display:block}
input{background:#fff}
.active{background:yellow}
</style>
<script src="http://www.mamicode.com/jquery-1.9.1.js"></script>
<script>
$(function(){
$("#main").find("input:button").click(function(){//在大的div里找出所有的按钮，添加点击事件
var i=$(this).index(); //设置当前被点击按钮的序号为i
$(this).addClass("active").siblings(":button").removeClass("active");//被点击的按钮添加class为active的样式，其它按钮删除样式
$(".sec").eq(i).css("display","block").siblings(".sec").css("display","none");//同时每个按钮所对应的div得display为block，其它div的display为none。
});
});
</script>
</head>
<body>
<div id="main">
<input type="button" value="http://www.mamicode.com/1" class="active">
<input type="button" value="http://www.mamicode.com/2">
<input type="button" value="http://www.mamicode.com/3">
<div class="sec news">新闻</div>
<div class="sec pic">图片</div>
<div class="sec topic">专题</div>
</div>
</body>
</html>
选项卡切换