TOMMYHU

<div id="xxk">
<div id="tab">

<h3 onclick="go_to(1);">酒店信息</h3>
<div class="block">
<ul>
<li><a href="#"> 酒店信息</a></li>
</ul>
</div>

<h3 class="up" onclick="go_to(2);">酒店房型及价格</h3>
<div>
<ul>
<li><a href="#">酒店房型及价格 </a></li>
</ul>
</div>

<h3 onclick="go_to(3);">用户点评</h3>
<div>
<ul>
<li><a href="#">用户点评 </a></li>
</ul>
</div>

<h3 onclick="go_to(4);">酒店问答</h3>
<div>
<ul>
<li><a href="#">酒店问答 </a></li>
</ul>
</div>

<h3 onclick="go_to(5);">周边环境</h3>
<div>
<ul>
<li><a href="#">周边环境 </a></li>
</ul>
</div>

  <h3 onclick="go_to(6);">附近酒店</h3>
<div>
<ul>
<li><a href="#">附近酒店 </a></li>
</ul>
</div>

</div>
</div>
<script type="text/javascript">
<!--
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao){
  for(var i=0;i<h.length;i++){
   if(ao-1==i){
   h[i].className+=" up";
   d[i].className+=" block";
   }
   else {
   h[i].className=" ";
   d[i].className=" ";
   }
  }
}
//-->
</script>

<style type="text/css">
ul {list-style:none}
#xxk
{
  margin:0 auto;
  width:900px;
}
/* 选项卡关键属性 */
#tab {margin:5px auto; width:900px; height:260px; position:relative; } /*设置容器高宽等*/
html > body #tab { width:900px; }/*兼容IE6:IE6下宽度不够*/
#tab div { position:absolute; top:26px; left:0; width:900px; height:234px; border:solid #057DDE; border-width:3px 1px 1px; }/*设置被操作容器高宽等*/
#tab div { display:none; }/*设置被操作容器默认隐藏:不用ID是因为下面将利用class来控制被操作容器显示,而class优先级低于id选择器*/
#tab .block { width:900px; display:block; }/*选中的被操作容器*/
#tab h3 { float:left; width:114px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:14px; cursor:pointer; font-weight:normal; text-align:center; color:#000000; background:#eee url(/images/xxk01.gif) no-repeat; }/*默认标题样式*/
#tab .up {  color:#fff; Background:#fff url(/images/xxk02.gif) no-repeat; }/*选中的标题样式*/
/*修饰列表内容*/
#tab ul { margin:15px 0 0; list-style:none; padding:0; }
#tab li { float:left; width:50%;}
#tab li a { display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333; text-indent:10px; }
#tab li a:hover { text-decoration:underline; color:#f00; }
</style>