自定义搜索
上一篇:符号图形收集
下一篇:PHP的strpos()函数和“===”;
转贴一个用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页
相关链接
1. Drupal 7.19: Notice: Undefined index: description in simpletest_test_form()
2. 手机卡成功剪卡装进iphone 5
3. iPhone 5 YouTube视频无法播放(已解决)
4. 整站下载工具WebZip
5. 如何用Adobe Flash CS4和ActionScript 3.0添加超级链接(附代码)
6. 学习Adobe Flash ActionScript的推荐链接
7. 网页右键禁用JavaScript代码
8. 下载Eclipse的链接
9. 应用Ajax、PHP、javascript来实现异步操作
10. 加拿大邮票: Canadian Diplomacy (2009)
11. 在eBay上卖东西(7):如何合并邮包优惠邮费(combine the shipping fee)
12. 在eBay上卖东西(3):什么是Print a shipping label
13. Boxing Day的多伦多Nathan Phillips广场(摄影)
14. iphone里的内置指南针定位
15. javascript中的冒号作什么用
16. 用javascript判断字符串是否为正整数