jTab - 选项卡(仿QQ选项卡)

演示地址：http://www.souab.com/Demo/200907/Tab/

$(".tab_two").jTab({
menutag: "#tab_two_menu li", ← 选项卡按钮标签
boxtag: "#tab_two_box > ul", ← 选项卡内容标签
cur: 1 ← 默认显示第二个选项（索引是从0开始的）
});

<!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>jTab - 选项卡</title>
<style>
body { margin:30px; font:normal 12px "宋体"; color:#333; }

a { color:#333; text-decoration:none; }
a:hover { color:#c00; text-decoration:underline; }
a:visited { text-decoration:none; }
a:active { text-decoration:none; }

ul, li, h2, h3 { margin:0; padding:0; }
h1, h2 { text-align:center; line-height:140%; }
li { list-style-type:none; }
img { border:0; }
.split { clear:both; height:30px; overflow:hidden; }
p { font-size:14px; line-height:200%; text-align:center; }
/* -- 选项卡two -- */
.tab_two,.tab_two1,.tab_two2 { width:296px; margin:0 auto; }
#tab_two_menu,#tab_two_menu1,#tab_two_menu2 { height:27px; background:url(tabbg.gif) 0 0 no-repeat; }
#tab_two_menu li,#tab_two_menu1 li,#tab_two_menu2 li {
float:left;
width:73px;
height:23px;
line-height:23px;
font-size:14px;
color:#1f376d;
text-align:center;
background:url(tabbg.gif) 0 -34px no-repeat;
cursor:pointer;
}
#tab_two_menu li.current,#tab_two_menu1 li.current,#tab_two_menu2 li.current { font-weight:bold; background:url(tabbg.gif) 0 -64px no-repeat; }

#tab_two_box,#tab_two_box1,#tab_two_box2{ width:294px; border:1px solid #aacbee; border-top:0; }
#tab_two_box ul,#tab_two_box1 ul,#tab_two_box2 ul{ padding:6px 0; }
#tab_two_box ul li,#tab_two_box1 ul li,#tab_two_box2 ul li {
padding-left:12px;
line-height:180%;
color:#1F376D;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jTab.js"></script>
<script type="text/javascript" >
$(function(){
$(".tab_two").jTab({
  menutag: "#tab_two_menu li",
  boxtag: "#tab_two_box > ul",
  cur: 1
});
$(".tab_two1").jTab({
  menutag: "#tab_two_menu1 li",
  boxtag: "#tab_two_box1 > ul",
  cur: 1
});
$(".tab_two2").jTab({
  menutag: "#tab_two_menu2 li",
  boxtag: "#tab_two_box2 > ul",
  cur: 1
});
});

</script>
</head>
<body>
<div class="tab_two">
<ul id="tab_two_menu">
  <li>汽车</li>
  <li>房产</li>
  <li>财经</li>
</ul>
<div id="tab_two_box">
  <ul>
   <li>试驾捷豹XFR运动房车新奥拓预计售新奥拓拓4.58万</li>
   <li>国产三菱发动机下线阿斯顿马丁开发微型车</li>
   <li>修车最担心什么新奔驰SLK2010年底将上市</li>
   <li>汉兰达加价2万新威驰降4千福克斯降1.1万</li>
   <li>博客 | 自驾穿西藏装备清单最受欢迎敞篷车</li>
   <li>论坛 | 福特GT大聚会雪佛兰Camaro Z28曝光</li>
  </ul>
  <ul>
   <li>购买限价房最后机会北京特惠现房精品推荐</li>
   <li>一业主买了8套房北京热门公园地产汇总</li>
   <li>深圳新房均价再涨2000 美林湾运动会落幕</li>
   <li>万科、保利楼市大赚艺苑桐城逆势热销</li>
   <li>家居 | 晒3套地中海婚房最美床模报名</li>
   <li>装修 | 征网友体验专业陶瓷评测橱柜2.6折</li>
  </ul>
  <ul>
   <li>1试驾捷豹XFR运动房车新奥拓预计售新拓拓4.58万</li>
   <li>1国产三菱发动机下线阿斯顿马丁开发微型车</li>
   <li>1修车最担心什么新奔驰SLK2010年底将上市</li>
   <li>1汉兰达加价2万新威驰降4千福克斯降1.1万</li>
   <li>1博客 | 自驾穿西藏装备清单最受欢迎敞篷车</li>
   <li>1论坛 | 福特GT大聚会雪佛兰Camaro Z28曝光</li>
  </ul>
</div>
</div>
<BR>

<div class="tab_two1">
<ul id="tab_two_menu1">
  <li>汽车</li>
  <li>房产</li>
</ul>
<div id="tab_two_box1">
  <ul>
   <li>试驾捷豹XFR运动房车新奥拓预计售新奥拓拓4.58万</li>
   <li>国产三菱发动机下线阿斯顿马丁开发微型车</li>
   <li>修车最担心什么新奔驰SLK2010年底将上市</li>
   <li>汉兰达加价2万新威驰降4千福克斯降1.1万</li>
   <li>博客 | 自驾穿西藏装备清单最受欢迎敞篷车</li>
   <li>论坛 | 福特GT大聚会雪佛兰Camaro Z28曝光</li>
  </ul>
  <ul>
   <li>购买限价房最后机会北京特惠现房精品推荐</li>
   <li>一业主买了8套房北京热门公园地产汇总</li>
   <li>深圳新房均价再涨2000 美林湾运动会落幕</li>
   <li>万科、保利楼市大赚艺苑桐城逆势热销</li>
   <li>家居 | 晒3套地中海婚房最美床模报名</li>
   <li>装修 | 征网友体验专业陶瓷评测橱柜2.6折</li>
  </ul>
</div>
</div>
<BR>

<div class="tab_two2">
<ul id="tab_two_menu2">
  <li>汽车</li>
  <li>房产</li>
  <li>科技</li>
  <li>教育</li>
</ul>
<div id="tab_two_box2">
  <ul>
   <li>试驾捷豹XFR运动房车新奥拓预计售新奥拓拓4.58万</li>
   <li>国产三菱发动机下线阿斯顿马丁开发微型车</li>
   <li>修车最担心什么新奔驰SLK2010年底将上市</li>
   <li>汉兰达加价2万新威驰降4千福克斯降1.1万</li>
   <li>博客 | 自驾穿西藏装备清单最受欢迎敞篷车</li>
   <li>论坛 | 福特GT大聚会雪佛兰Camaro Z28曝光</li>
  </ul>
  <ul>
   <li>购买限价房最后机会北京特惠现房精品推荐</li>
   <li>一业主买了8套房北京热门公园地产汇总</li>
   <li>深圳新房均价再涨2000 美林湾运动会落幕</li>
   <li>万科、保利楼市大赚艺苑桐城逆势热销</li>
   <li>家居 | 晒3套地中海婚房最美床模报名</li>
   <li>装修 | 征网友体验专业陶瓷评测橱柜2.6折</li>
  </ul>
  <ul>
   <li>1试驾捷豹XFR运动房车新奥拓预计售新拓拓4.58万</li>
   <li>国产三菱发动机下线阿斯顿马丁开发微型车</li>
   <li>修车最担心什么新奔驰SLK2010年底将上市</li>
   <li>汉兰达加价2万新威驰降4千福克斯降1.1万</li>
   <li>博客 | 自驾穿西藏装备清单最受欢迎敞篷车</li>
   <li>论坛 | 福特GT大聚会雪佛兰Camaro Z28曝光</li>
  </ul>
  <ul>
   <li>1购买限价房最后机会北京特惠现房精品推荐</li>
   <li>一业主买了8套房北京热门公园地产汇总</li>
   <li>深圳新房均价再涨2000 美林湾运动会落幕</li>
   <li>万科、保利楼市大赚艺苑桐城逆势热销</li>
   <li>家居 | 晒3套地中海婚房最美床模报名</li>
   <li>装修 | 征网友体验专业陶瓷评测橱柜2.6折</li>
  </ul>
</div>
</div>
<BR>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td align="center"><script type="text/javascript">
</script>
        <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
    </td>
</tr>
<tr>
    <td height="8"></td>
</tr>
<tr>
    <td align="center"><script type="text/javascript">
</script>
        <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr>
<tr>
    <td height="8"></td>
</tr>
<tr>
    <td align="center"><script type="text/javascript">
</script>
        <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr>
</table>
</body>
</html>