选项卡 一个页面支持多个 表现 结构分离

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<scriptlanguage="javascript">
window.onload=resetTab;
functiongetTabTitle(tab){
varchildNodesList=tab.childNodes;
vartitleNodes=newArray();
varj=0;
vari;
for(i=0;i<childNodesList.length;i++){
if(childNodesList[i].nodeName=="H1"){
titleNodes[j]=childNodesList[i];
j++;
}
}
returntitleNodes;
}
functiongetTabContent(tab){
varchildNodesList=tab.childNodes;
vartabContent=newArray();
varj=0;
vari;
for(i=0;i<childNodesList.length;i++){
if(childNodesList[i].nodeName=="DIV"){
tabContent[j]=childNodesList[i];
j++;
}
}
returntabContent;
}
functionresetTab(){
varallDiv=document.getElementsByTagName("div");
vartab=newArray();
varj=0;
vari;
for(i=0;i<allDiv.length;i++){
if(allDiv[i].className=="tabs"){
tab[j]=allDiv[i];
j++;
}
}
vartabTitle,tabContent;
for(i=0;i<tab.length;i++){
tabTitle=getTabTitle(tab[i]);
tabTitle[0].className="selectTab";
tabContent=getTabContent(tab[i]);
tabContent[0].className="selectContent";
for(j=1;j<tabTitle.length;j++){
tabTitle[j].className="unselectTab";
tabContent[j].className="unselectContent";
}
}
}
functionchangTab(tab){
vartabTitle,tabContent,i;
if(tab.className!="selectTab"){
tabTitle=getTabTitle(tab.parentNode);
tabContent=getTabContent(tab.parentNode);
for(i=0;i<tabTitle.length;i++){
if(tabTitle[i].className=="selectTab"){
tabTitle[i].className="unselectTab";
}
if(tabContent[i].className=="selectContent"){
tabContent[i].className="unselectContent";
}
}
tab.className="selectTab";
for(i=0;i<tabTitle.length;i++){
if(tabTitle[i].className=="selectTab"){
tabContent[i].className="selectContent";
break;
}
}
}
}




</script>
<styletype="text/css">
<!--
body{
margin:50px;
padding:0px;

}
.tabs{
width:auto;
height:auto;


}
.selectTab,.unselectTab{
border:1pxsolid#BDDFF9;
border-bottom-width:0;
width:150px;
line-height:32px;
text-align:center;
background-color:#37709b;
margin:0;
margin-right:18px;
font-weight:bold;
font-size:14px;
color:#FFF;
cursor:pointer;
display:inline;
padding:8px;
}
.unselectTab{
color:#37709B;
background-color:white;
}
.selectContent{
border-top:5px#37709bsolid;
float:left;
padding:8px;
margin:0px;
}
.unselectContent{
display:none;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<divclass="tabs">
<h1onmouseover="changTab(this)">选项卡[1]</h1>
<div><p><strong>解决dd的自适用高度</strong></p>
<p>对于已经position:absolute;了的dd,无论是理论还是实践,使用纯CSS都没有解决方法。同样,我使用了JavaScript来动态计算它的每一次高度,然后赋予整个dl。</p>
<p><strong>局限性与缺点</strong></p>
<p>这样做保证了标准、语义、Unobtrusive。但对于少部分拥有能解析CSS的先进浏览器但却关闭了JavaScript的用户来说,极有可能会被不能自适用高度的页签下的内容区块挡住了跟随在后的信息。</p>
<p><strong>s2uTab</strong></p>
</div>
<h1onmousemove="changTab(this)">选项卡[2]</h1>
<div>2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div>
<h1onmouseover="changTab(this)">选项卡[3]</h1>
<div>3经过前述的多个步骤,一个基本的CHM文件已制作完毕,在编译前还可进行一些完善功能的设置,具体如下所述。</div>
<h1onmousemove="changTab(this)">选项卡[4]</h1>
<div>4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div>
<divclass="clear"></div>
</div><p></p><p><p></p></p><p><p></p></p>
<divclass="tabs">
<h1onmouseover="changTab(this)">选项卡[1]</h1>
<div>1经过前述的多个步骤,一个基本的CHM文件已制作完毕,在编译前还可进行一些完善功能的设置,具体如下所述。</div>
<h1onmousemove="changTab(this)">选项卡[2]</h1>
<div>2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div>
<h1onmouseover="changTab(this)">选项卡[3]</h1>
<div>3经过前述的多个步骤,一个基本的CHM文件已制作完毕,在编译前还可进行一些完善功能的设置,具体如下所述。</div>
<h1onmousemove="changTab(this)">选项卡[4]</h1>
<div>4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div>
<pclass="clear"></p>
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值