<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<style type="text/css">
<!--
body{
margin:30px;
padding:0px;
}
span{
padding:0px;
margin:0px;
}
h4{
padding:0px;
margin:0px;
}
img{border:0px; z-index:100;}
* { margin:0; padding:0; font-size:13px; font-weight:normal; }
.jj { font-weight:bolder!important; }
.box { border-top-color:#FFFFFF!important; }
.pr { color:#060!important; }
#tab02 { width:234px; height:280px; margin-left:5px; border:solid #ccc; border-width:0 1px 1px; vertical-align:middle; *display: block; }
#tab02 h4 { height:24px; line-height:18px;border:solid #ccc; border-width:1px 0; margin-bottom:-1px; background:#f6f6f6; cursor:pointer; padding-top:6px; }
#tab02 h4.up { color:#c00; }
#tab02 ol { display:none; height:68px; padding:0px; color:#666; }
#tab02 ol.up { display:block; }
.STYLE2 {
font-size: 10px;
color: #999999;
margin-right:5px;
margin-top:10px;
}
.STYLE3 {
color: #CC3300;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="tab01"></div>
<div id="tab02">
<h4 align="center">咸宁碧桂园温泉一日游 RMB<span class="STYLE3">140</span>元 <span class="STYLE2"> ▶</span></h4>
<ol class="pr"><li><a href="#"><img src="http://rian.8.bname.us/images//20101231/001.jpg" /></a>
</li></ol>
<h4 align="center" class="box">瑶池温泉潜山一日游 RMB<span class="STYLE3">135</span>元<span class="STYLE2"> ▶</span></h4>
<ol><li><a href="#"><img src="http://rian.8.bname.us/images//20101231/001.jpg" /></a></ol>
<h4 align="center">咸宁三江温泉一日游 RMB<span class="STYLE3">150</span>元 <span class="STYLE2"> ▶</span></h4>
<ol><li>
<a href="#"><img src="http://rian.8.bname.us/images//20101231/001.jpg" /></a></li></ol>
<h4 align="center" class="bb">嘉鱼山湖温泉一日游 RMB<span class="STYLE3">170</span>元 <span class="STYLE2"> ▶</span></h4>
<ol><li>
<a href="#"><img src="http://rian.8.bname.us/images//20101231/001.jpg" /></a></li></ol>
<h4 align="center">应城汤池一日游 RMB<span class="STYLE3">170</span>元<span class="STYLE2"> ▶</span></h4>
<ol class="pr"><li>
<a href="#"><img src="http://rian.8.bname.us/images//20101231/001.jpg" /></a></li></ol>
<h4 align="center" >咸宁万豪温泉谷一日游 RMB<span class="STYLE3">155</span>元 <span class="STYLE2"> ▶</span></h4>
<ol><li>
<a href="#"><img src="http://rian.8.bname.us/images//20101231/001.jpg" /></a></li></ol>
<h4 align="center">太乙洞温泉一日游 RMB<span class="STYLE3">168</span>元 <span class="STYLE2"> ▶</span></h4>
<ol><li>
<a href="#"><img src="http://rian.8.bname.us/images//20101231/001.jpg" /></a></li></ol>
</div>
<div id="tab03">
</div>
<script type="text/javascript">
<!--
function Pid(id,tag){
if(!tag){
return document.getElementById(id);
}
else{
return document.getElementById(id).getElementsByTagName(tag);
}
}
function tab(id,hx,box,iClass,s,pr){
var hxs=Pid(id,hx);
var boxs=Pid(id,box);
if(!iClass){ // 如果不指定class，则：
boxsClass=boxs; // 直接使用box作为容器
}
else{ // 如果指定class，则：
var boxsClass = [];
for(i=0;i<boxs.length;i++){
if(boxs
.className.match(/\btab\b/)){// 判断容器的class匹配
boxsClass.push(boxs);
}
}
}
if(!pr){ // 如果不指定预展开容器，则：
go_to(0); // 默认展开序列
yy();
}
else {
go_to(pr);
yy();
}
function yy(){
for(var i=0;i<hxs.length;i++){
hxs.temp=i;
if(!s){// 如果不指定事件，则：
s="onmouseover"; // 使用默认事件
hxs[s]=function(){
go_to(this.temp);
}
}
else{
hxs[s]=function(){
go_to(this.temp);
}
}
}
}
function go_to(pr){
for(var i=0;i<hxs.length;i++){
if(!hxs.tmpClass){
hxs.tmpClass=hxs.className+=" ";
boxsClass.tmpClass=boxsClass.className+=" ";
}
if(pr==i){
hxs.className+="up"; // 展开状态：标题
boxsClass.className+=" up"; // 展开状态：容器
}
else {
hxs.className=hxs.tmpClass;
boxsClass.className=boxsClass.tmpClass;
}
}
}
}
tab("tab02","h4","ol");
//-->
</script>
</body>
</html>
[ 本帖最后由 rian 于 2010-12-31 15:49 编辑 ]
