=================================================
================【 选项卡 】=================
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>呵呵</title>
</head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { 240px;margin:50px;}
/*.tab_menu { clear:both;}*/
.tab_menu li {
float:left;
text-align:center;
cursor:pointer;
list-style:none;
padding:1px 6px;
margin-right:4px;
background:#F1F1F1;
border:1px solid #898989;
border-bottom:none;
}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
</style>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">呵呵</li>
<li>啊啊啊啊</li>
<li>嘿嘿</li>
</ul>
</div>
<div class="tab_box">
<div>aaaaaaaa</div>
<div class="hide">bbbbbbbbbb</div>
<div class="hide">ccccccccccc</div>
</div>
</div>
</body>
<script type="text/javascript" >
$(function(){
$('div.tab_menu li').click(function(){
// alert(111);
var index=$('div.tab_menu li').index(this);
console.log(index);
$(this).addClass('selected').siblings().removeClass('selected');
$('div.tab_box>div').eq(index).show().siblings().hide();
});
$('div.tab_menu li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
})
</script>
</html>