<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>模板</title>
<style type="text/css">
*{margin:0px;padding:0px; }
.tabs{960px;margin:0px auto;font-size:14px; }
.tabs .tabsLi{overflow:hidden;zoom:1;margin-left:-5px;}
.tabs .tabsLi li{float:left; display:inline; margin-left:5px;60px;text-align:center; height:22px;line-height:22px;color:#fff; background:#f60;cursor:pointer;}
.tabs .tabsLi li.current{ background:#999;}
.tabs .hd{z-index:5;position:relative; }
.tabs .bd{border:1px solid #ccc;padding:10px;margin-top:-1px;}
.tabs .bd .tabody{display:none;line-height:24px; }
.daoyu{960px;margin:30px auto;line-height:24px;font-size:14px;}
.daoyu h2{text-align:center;font-size:18px;font-weight:bold; }
</style>
</head>
<body>
<div class="daoyu">
<h2 class="daoyu" >这是个页卡，这不是个普通的页卡。</h2>
<p class="text">页卡中添加了锚点，点击不同的页卡页面的路径也不一样。这样一个页卡就像是一个页面一样。同理可根据锚点的后缀名算出当前需要打开的页卡。比如：file:///C:/Users/shenshenyan/Desktop/%E9%A1%B5%E5%8D%A1%E6%B7%BB%E5%8A%A0%E9%94%9A%E7%82%B9.html#page1。这个就是打开第二个页卡内容</p>
</div>
<div class="tabs">
<div class="hd">
<ul class="tabsLi" id="tabsLi" >
<li onclick="clickLi(0)">页卡一</li>
<li onclick="clickLi(1)">页卡二</li>
<li onclick="clickLi(2)">页卡三</li>
</ul>
</div>
<div class="bd" id="tabsBody">
<div class="tabody">页卡一内容:2012年的欧洲杯好戏开锣，各路闲杂人等纷纷表示自己原来是个球迷，自己98年就开始看世界杯等等，看个新闻都要大喊“托雷斯好帅啊”以显示自己的花痴程度，实际上嘛也就是凑个热闹。看着眼前这些肤浅的人类，我不由得轻轻地叹了一口气，抬头望了望天，天色很蓝……</div>
<div class="tabody">页卡二内容:春雪同学其貌不扬，矮肥圆的设定让人充满了亲切感。但是没关系，因为我们又不是选模特，春春被黑雪姬大人称为“加速世界最快”的人，并不是浪得虚名的。出色的能力，可以让他在边后卫的位置上如鱼得水，再看看他那双大腿，粗壮圆润，有没有让你想起当年那个可怕的罗伯特卡洛斯？</div>
<div class="tabody">页卡三内容:这位欠债管家同学，同样有着极其出色的身体素质，骑自行车追跑车，单手打老虎，一个人就将众多女生玩弄于鼓掌之中，表现出了非常强悍的爆发力和掌控力！</div>
</div>
</div>
<script type="text/javascript">
function $(s){
return document.getElementById(s)
}
var tabsLi=$("tabsLi").getElementsByTagName("li");
var current=0;
var Dom = {
ByClassName:function(idNmae,ClassName){
try{
var l = document.getElementById(idNmae).getElementsByTagName("*");
var r = new Array(),j=0;
for(var i = 0 ; i < l.length ; i ++){
if(l[i].className==ClassName)
// if(l[i].getAttribute("class").toLocaleString()==ClassName.toLocaleString())
{
r[j++]=l[i];
}
}
return r;
}
catch(e){
return null;
}
}
}
var tabsBox= Dom.ByClassName("tabsBody","tabody");
//teames=document.getElementById("teames");
for(i=0;i<tabsLi.length;i++){
if(i==current){
tabsLi[i].className="current";
tabsBox[i].style.display="block";
}
}
var strURL=window.location.href;
function clickLi(n){
var pageU=["#page0","#page1","#page2"];
tabsLi[current].className="";
tabsBox[current].style.display="none";
tabsLi[n].className="current";
tabsBox[n].style.display="block";
strU=pageU[n];
var strUNo=strURL.indexOf("#page");
strURL=strURL.substring(0,strUNo);
window.location.href=strURL+strU;
var cheaIdx=strURL.indexOf("#page0");
current=n;
}
function clickLiUL(n){
tabsLi[current].className="";
tabsBox[current].style.display="none";
tabsLi[n].className="current";
tabsBox[n].style.display="block";
current=n;
}
var str_sr=strURL.indexOf("#");
var str_l=strURL.substr(str_sr,6);
if (str_l=="#page1"){clickLiUL(1)} else if (str_l=="#page2"){clickLiUL(2)} else if (str_l=="#page3"){clickLiUL(3)} else if (str_l=="#page4"){clickLiUL(4);} else if (str_l=="#page5"){clickLiUL(5)}else{clickLiUL(0)};
</script>
</body>
</html>