<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Tab选项 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
li {
display:list-item;
}
.ltopex_title li.current {
background-position:-200px -350px;
border-bottom-color:transparent;
color:#000000;
background-color:#999999;
font-weight:bold;
height:21px;
line-height:22px;
padding-top:4px;
display:block;
}
.ltopex_title li {
background-position:left -350px;
border-bottom:1px solid #9AB9DC;
color:#345083;
cursor:pointer;
float:left;
height:25px;
line-height:24px;
margin-right:4px;
position:relative;
text-align:center;
width:105px;
}
.ltopex_body {
background-position:-50px -50px;
height:125px;
margin-top:25px;
padding-top:5px;
text-align:center;
width:238px;
z-index:2;
}
.ltopex_body li {
display:none;
}
.ltopex_body li.current {
display:block;
}
</style>
<SCRIPT>
function toggle_extend(c,id){
if(c.className.indexOf("current")> -1)
return;
var lis = c.parentNode.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].className ="";
}
c.className ="current";
document.getElementById("aaa").className ="";
document.getElementById("bbb").className ="";
document.getElementById(id).className ="current";
}
</SCRIPT>
</HEAD>
<BODY>
<div id="tab1">
<ul class="ltopex_title">
<li class="current" onClick="toggle_extend(this,'aaa')">今天内容</li>
<li onClick="toggle_extend(this,'bbb')">昨天内容</li>
</ul>
<div id="tabcontent" class="ltopex_body">
<ul>
<li id="aaa" class="current">
今天报道
</li>
<li id="bbb">
昨日报道
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
ExtJS教程-
Hibernate教程-
Struts2 教程-
Lucene教程