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

最新推荐文章于 2020-07-02 21:40:21 发布

最新推荐文章于 2020-07-02 21:40:21 发布 · 117 阅读

文章标签：

#JavaScript #CSS #J# #浏览器 #XHTML #ViewUI

<!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">

</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>