编程笔记-- Coolder.com

转贴一个用Javascript制作标签页的例子程序

米娅 2009年8月2日 11:44:25

<html><head><title>tab</title></head>
<style>
#tabpage{width:80%;height:60%;}
/*--------------------------*/
.fvtab{z-index:1;position:relative;left:1px;padding:1mm 0;border:1px solid #909090;border-right:none;background-color:#fafcff;}
.bvtab{z-index:-1;position:relative;left:1px;background-color:#abcdef;}
.vtabs {float:left;width:10%;}
.vtabs a{text-decoration:none;display:block;}
.vpages{float:left;width:80%;height:100%;z-index:0;background-color:#fafcff; border:1px solid #909090;}

/*---------------------------*/
.fhtab{position:relative;padding:1mm 2mm 1px;border:1px solid #909090;border-bottom:none;background-color:#fafcff;}
.bhtab{padding:0px;background-color:#abcdef;}
.htabs {width:90%;text-align:left;}
.htabs a{text-decoration:none;}
.hpages{ width:90%;height:100%;background-color:#fafcff; border:1px solid #909090; }

</style>

<script>
var g_tab=1;
function $(id)
{
return document.getElementById(id);
}

function InitTab(index)
{
$("tabs").className=g_tab?"vtabs":"htabs";
$("pages").className=g_tab?"vpages":"hpages";

var FnShowPage=function(i)
{
return function(){
ShowPage(i);
}
}
var onodes=$("tabs").children;
for(var i=0;i<onodes.length;i++)
{
onodes.item(i).attachEvent("onclick",FnShowPage(i));
}
ShowPage(index);
}

function ShowPage(i){
var onodes=$("tabs").children;
var j=0;
for(j=0;j<onodes.length;j++)
{
if(j==i){
onodes.item(j).className=g_tab?"fvtab":"fhtab";
}else{
onodes.item(j).className=g_tab?"bvtab":"bhtab";
}
}

onodes=$("pages").children;

for(j=0;j<onodes.length;j++)
{
if(j==i){
onodes.item(j).style.display="block";
}else{
onodes.item(j).style.display="none";
}
}
}
</script>

<body onLoad="InitTab(1)">
<div id="tabpage">
<div id="tabs">
<a href="#"> tab1</a>
<a href="#"> tab2</a>
<a href="#"> tab3</a>
<a href="#"> tab4</a>
<a href="#"> tab5</a>
</div>
<div id="pages">
<div contenteditable>page1</div>
<div contenteditable>page2</div>
<div contenteditable>page3</div>
<div contenteditable>page4</div>
<div contenteditable>page5</div>
</div>
</div>
<input type=button value="!tab" onClick="g_tab=!g_tab;InitTab(1);"/>
</body> </html>

转贴自:http://hi.baidu.com/84fy/blog/item/1d77960033e84f80e950cd15.html

楼主按: 效果很好.

2楼 2009年8月2日 11:56:32 米娅

正如作者说的，在IE上很好，在firefox上会有问题，另外，屏幕的大小对它也有影响。有网友说，要先让程序在firefox上通过了，再试其他浏览器，这样编程遇上的麻烦会比较少。IE和其他浏览器对某些函数的解释可能有差别。

第1页共1页