效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.tab_menu ul li{
display: inline-block;
cursor: pointer;
padding: 5px 10px;
}
.selected{
background-color: #2BB3D5;
border-radius: 5px;
color: #fff;
}
.hover{
background-color: #ccc;
border-radius: 5px;
}
.tab_box div{
border: 1px solid black;
height: 150px;
width: 500px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
</ul>
</div>
<div class="tab_box">
<div >测试文本1</div>
<div class="hide">测试文本2</div>
<div class="hide">测试文本3</div>
<div class="hide">测试文本4</div>
<div class="hide">测试文本5</div>
</div>
</div>
<script type="text/javascript">
$("div.tab_menu ul li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var idx = $(this).index();
$("div.tab_box>div").eq(idx).show().siblings().hide();
})
</script>
</body>
</html>
Notice
$("div.tab_box>div").eq(idx).show().siblings().hide();这里必须用子代选择器，如果用后代选择器可能出问题
