用选项卡布局成的网站首页

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>选项卡布局网站首页</title>
<style type="text/css"> 

</style>
<script> 
function bluring(){ 
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); 
} 
document.onfocusin=bluring; 
</script>
<script language="javascript"> 
function switchTag(tag,content)
{
  for(i=1; i <3; i++)
  {
    if ("tag"+i==tag)
    {
      document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
      document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
    }else{
      document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
      document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
    }
    if ("content"+i==content)
    {
      document.getElementById(content).className="";
    }else{
      document.getElementById("content"+i).className="hidecontent";
    }
    document.getElementById("content").className=content;
  }
}
</script>
</head>
<body>
<div id="top"></div>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span>我的首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>何许人也？</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>苦涩北漂</span></a></li>
    </ul>
  </div>
  <div id="content" class="content1">
    <div id="content1">我喜欢说老实话，办老实事，做老实人......</div>
    <div id="content2" class="hidecontent">我来自银河系，30亿前撞击了地球，而后地球发生了变化，开始出现生命……</div>
    <div id="content3" class="hidecontent">我是传奇</div>
  </div>
</div>
<div id="bottom">marvellous &copy;版权所有2000-2006</div>
</body>
<html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

用选项卡布局成的网站首页

分类

表格图层

描述

用选项卡布局成的网站首页，你可以在这个大选项卡中布局一些背景图片，这样它就更漂亮了，用这种效果制作出首页，其实还是蛮不错的，挺个性。