TAB选项

super2 · 发表于 2013-2-4 21:32:22

<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;"><!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.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>

		自动登录	找回密码
密码			立即注册

TAB选项

浏览过的版块