tab选项卡
简单实现一个用jquery做的tab选项卡
<!doctype html>
<html lang="zh-CN">
<head>
<mate http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>tab选项卡</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:12px/19px Arial, Helvetica, sans-serif; color:#666;
}
.tab{
width:240px;
margin:50px;
}
.tab_menu{
clear:both;
}
.tab_menu li{list-style:none; background-color:orange;float:left; cursor:pointer;padding:1px 6px;margin-right:4px;border:1px solid #666;border-bottom:none;width:40px; text-align:center;}
.tab_menu li.hover{
background:red;
}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box{clear:both; border:1px solid #898989; height:100px;}
.hide{display:none;}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">陕西</li>
<li>四川</li>
<li>北京</li>
<li>上海</li>
</ul>
</div>
<div class="tab_box">
<div class="tab_box_con">陕西</div>
<div class="tab_box_con hide">四川</div>
<div class="tab_box_con hide">北京</div>
<div class="tab_box_con hide">上海</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $div_li = $(".tab_menu ul li");
$div_li.hover(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var key = $div_li.index(this);
$("div.tab_box > .tab_box_con").eq(key).show().siblings().hide();
});
});
</script>
</body>
</html>
