<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*js编写第一步：将多余选项卡内容隐藏*/
$(".ct:gt(0)").hide();//把大于0的.ct元素隐藏（1，2）
/*js编写第二步：选项卡切换*/
var obj=$(".box ul li");//取得.box下的ul下的所有li标签
obj.click(function(){
$(this).addClass('one')//为单击到的选项卡添加one样式，其它选项卡去除one样式
.siblings().removeClass();
var ct_index=obj.index(this);//获得单击的选项卡的索引，即下属内容的索引
$(".ct").eq(ct_index).show()//把对应的内容显示出来，不对应的则隐藏
.siblings().hide();
});
/*js编写第三步：为卡项加上鼠标悬浮变桔黄色的效果*/
obj.hover(function(){
$(this).addClass('two')//为鼠标悬浮的选项卡添加two样式，其它选项卡去除two样式
.siblings().removeClass('two');
});
obj.mouseout(function(){//鼠标移出恢复颜色，与上面有些重复
$(this).removeClass('two');
});
//代码完毕
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:12px;
padding:100px;
}
ul{/*去除列表符*/
list-style-type:none;
}
/***********************************************************/
.box ul{/*设置选项卡头部标题部分的高度*/
height:30px;
line-height:30px;
}
.box ul li{/*选项卡各个子项的设置*/
/*它的高度从ul中继承为30px*/
/*第一步：将其设为左浮动，使各个子项在一行上排列并加上手形装饰*/
/*第二步：为各个子项的外围右侧（margin）增加间距*/
/*第三步：为各个子项的内围左侧和右侧（padding）增加间距*/
/*第四步：增加边框颜色为黑色，但去除底边框*/
float:left;
border:1px solid #000;
border-bottom:none;
cursor:pointer;
margin-right:5px;
padding:0 10px;
position:relative;/*兼容ie6所加代码*/
}
.box ul li.one{/*默认呈现的卡项*/
background:#fff;/*加上白色背景将把内容边框线覆盖，但ie6并不成功*/
}
.box ul li.two{/*鼠标指上去要呈现的样式*/
background:orange;/*卡项变成桔黄色*/
}
.content{/*设置选项卡内容容器的宽度、高度、边框、内间距*/
325px;
height:100px;
border:1px solid #000;
padding:10px;
}
* html .content{/*兼容ie6所加代码 必须这样写，不能.content*/
margin-top:-1px;
}
</style>
</head>
<body>
<div class="box"><!--选项卡的容器-->
<ul><!--选项卡头部标题部分-->
<li class="one">菜单一</li><!--给默认呈现的卡项添加一个one样式-->
<li>菜单二</li>
<li>菜单三</li>
</ul>
<div class="content"><!--选项卡内容部分-->
<div class="ct">选项卡一的内容</div>
<div class="ct">选项卡二的内容</div>
<div class="ct">选项卡三的内容</div>
</div>
</div>
选中内容按ctrl+t，可以打开环绕标签
ctrl+h是代码提示
</body>
</html>