为页卡添加锚点的JS，输入页卡对应锚点的链接就会打开相对应的页卡

<!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 οnclick="clickLi(0)">页卡一</li>
               <li οnclick="clickLi(1)">页卡二</li>
               <li οnclick="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;

转载于:https://www.cnblogs.com/yansen/archive/2012/06/27/2566101.html

为页卡添加锚点的JS，输入页卡对应锚点的链接就会打开相对应的页卡相关推荐

HTML5 单页应用/框架 - View.js介绍
单页应用框架: View.js - http://view-js.com 什么是单页应用单页应用,是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用. 换句话来讲,用户视觉效果,与技术实现的 ...
html局部翻页效果,基于Turn.js 实现翻书效果实例解析
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是 ...
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业——橙色的素材火资源整站(25页)
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业--橙色的素材火资源整站(25页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
表格设置翻页 html,使用原生JS实现表格数据的翻页功能
使用原生JS实现如下图所示表格数据的翻页功能: HTML代码: 表格标题 < > 简单处理一下样式,CSS代码: #pagination { text-align: center; } # ...
打开html就自动到搜狗网扯,今天一打开IE浏览器，页就一直是搜狗网址导航，怎么改也改不掉，...
今天一打开IE浏览器,页就一直是搜狗网址导航,怎么改也改不掉,现在非常怀疑你点开的IE图标就是一个流氓快捷方式所以你给桌面上的图标给删除了然后在开始或者IE文件夹里面找到IE 在点击下看看恢复没 ...
PowerBuilder打开OLE控件页崩溃的解决办法
PowerBuilder打开OLE控件页崩溃的解决办法 PB 执行 Insert -> OLE... -> Insert Control - 崩溃的解决办法工具/原料 * PB12及 ...
Chrome升级后打开新的标签页变样了……
最近更新Chrome后,打开新的标签页完全变样了,让人不知所措,特别是没有了那个"最近关闭标签页"按钮,这让我抓狂-- PS:Chrome版本号为:29.0.1547.76 m P ...
HTML点击链接打开新的标签页
1.为<a>标签添加target="_blank"属性 <a href="#" target="_blank">de ...
chrome浏览器如何重新打开关闭的标签页？（快捷键ctrl+shift+t）
像360浏览器是在这恢复的(右击标签) chrome浏览器又是在哪呢? 它就不是在标签上右击了,是在标签栏旁边的空白处右击快捷键是ctrl+shift+t,这个跟360浏览器是一样的参考文章:ch ...

为页卡添加锚点的JS，输入页卡对应锚点的链接就会打开相对应的页卡

为页卡添加锚点的JS，输入页卡对应锚点的链接就会打开相对应的页卡相关推荐

最新文章

热门文章