为页卡添加锚点的JS，输入页卡对应锚点的链接就会打开相对应的页卡
2012-06-27 17:16
183 查看
<!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{width: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;width: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{width: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
.className="current";
tabsBox
.style.display="block";
strU=pageU
;
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
.className="current";
tabsBox
.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>
<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{width: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;width: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{width: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
.className="current";
tabsBox
.style.display="block";
strU=pageU
;
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
.className="current";
tabsBox
.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用echarts.js制作中国地图,点击对应的省市链接到指定页面
- iOS通过链接，应用内打开APP或者跳转APPStore对应下载
- 在数据显示页中当要打开“添加页”或者“编辑页”时的js脚本代码
- CSDN-markdown编辑器锚点链接添加方法
- JS实现页面上链接新窗口打开
- js实现一个链接打开两个链接地址的方法
- JS 实现获取打开一个界面中输入的值
- Flex中给按钮添加链接点击链接打开网页的方法
- GreyFrame是一个遮罩弹出显示页面的JS类, 它可以允许你像在框架(如: frame和iframe)中打开一个链接.
- 网页添加飘动窗口（图片链接）+ IE8下js解析错误
- html中下拉菜单选项添加链接打开
- 怎么把js获得的list数据加上链接定向显示在HTML中，并且点击对应内容会访问链接内容
- 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天做个demo（续集）
- 动态添加div及对应的js、css文件
- 微信打开的网页中添加关注链接的方法
- 添加js输入验证框
- android点击链接打开应用对应界面
- 添加JS文件为链接
- js帮其他元素添加链接的方式
- js--javascript 新建page页打开链接