jquery tab选项卡

<!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>
        <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>