Chinaunix首页 | 论坛 | 博客

犹大huaius.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

huaius

  • 博客访问： 2454239
  • 博文数量： 328
  • 博客积分： 4302
  • 博客等级： 上校
  • 技术积分： 5486
  • 用 户 组： 普通用户
  • 注册时间： 2010-07-01 11:14
个人简介

悲剧，绝对的悲剧，悲剧中的悲剧。

文章分类

全部博文（328）

文章存档

2017年（6）

2016年（18）

2015年（28）

2014年（73）

2013年（62）

2012年（58）

2011年（55）

2010年（28）

我的朋友
最近访客
推荐博文
JavaScript 标签页

分类： JavaScript

2014-02-11 00:14:32

网上找到两种标签页的实现方法，尝试一下。

一. 利用bootstrap


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>标签页示例</title>
  6. <link href="" rel="stylesheet">
  7. <script src="" type="text/javascript"></script>
  8. <script src="" type="text/javascript"></script>
  9. </head>

  11. <body style="width:500px; margin:auto;">
  12.   <ul class="nav nav-tabs">
  13.      <li class="active"><a href="#home" data-toggle="tab" >首页</a></li>
  14.      <li class=""><a href="#profile" data-toggle="tab" >介绍</a></li>
  15.   </ul>

  17.   <div class="tab-content">
  18.      <div class="tab-pane active" id="home">
  19.               <p>
  20.         5月6日，北京，一对新人启用直升机接亲。该直升机是欧洲直升机公司系列，机型为AS350B3，该公司北京唯一可承接低空飞行业务的航空公司，此次为首次承接婚礼。据悉，首次空中婚礼总费用为5万元。定价包括飞行时间和申报审批等费用，飞行时间按照1小时3万元计算。
  21.      </p>
  22.      </div>
  23.      <div class="tab-pane" id="profile">
  24.               <p>
  25.         法国代表社会党参选的奥朗德今晨在大选中获得胜利，成为法兰西第五共和国第七位总统，法国也在17年之后迎来首位左翼总统。萨科齐在5年任内因政绩不佳引发不满，选前处于民调落后的劣势。萨科齐虽试图打造“危机总统”形象，但终未能实现逆转。奥朗德现年58岁，至今未婚，与社会党前总统选举候选人罗亚尔同居30多年，育有4子女，多年来坚持骑车上下班。对华关系持强硬立场。
  26.      </p>
  27.      </div>
  28.   </div>
  29. </body>
  30. </html>
详细介绍可以参考这个页面

二. 通过编写代码来实现


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title> 标签切换 </title>
  6. <style type="text/css">
  7.     * { margin: 0; padding: 0; }
  8.     .box { width: 300px; margin: 0 auto; font: 12px/1.5 'microsoft yahei'; text-align: center; }
  9.     .box .hd { overflow: hidden; }
  10.     .box .hd a { float: left; width: 100px; height: 30px; }
  11.     .box .hd .cur { background-color: #ccc; }
  12.     .box .bd div { width: 300px; height: 100px; line-height: 100px; background-color: #ccc; }

  14.     /* 必须样式 */
  15.     .box .hd .cur { }
  16.     .box .bd div { display: none;}

  18. </style>
  19. </head>
  20. <body>
  21. <!-- 注意：默认选项的栏目有class名，默认切换内容有 display:block; -->
  22. <div class="box" id="oBox">
  23.     <div class="hd">
  24.         <a class="cur" href="">栏目1</a>
  25.         <a href="">栏目2</a>
  26.         <a href="">栏目3</a>
  27.     </div>
  28.     <div class="bd">
  29.         <div style="display: block;">内容1</div>
  30.         <div>内容2</div>
  31.         <div>内容3</div>
  32.     </div>
  33. </div>
  34. <script type="text/javascript">
  35. function TabSwitch (conf){
  36.     this.obj = conf.obj;
  37.     this.cur = conf.cur || 'cur';
  38.     this.hd = conf.hd;
  39.     this.bd = conf.bd;
  40.     this.ev = conf.ev || 'mouseover';
  41.     this.delay = conf.delay || 0;
  42.     this.auto = conf.auto;
  43.     this.index = 0;
  44.     if(this.auto){
  45.         this.delay = conf.delay || 1000;
  46.         this.AutoPaly();
  47.     }else{
  48.         this.Int();
  49.     }
  50. }
  51. TabSwitch.prototype = {
  52.     bindEvent : function(obj, ev, fn){
  53.         var F = function(){
  54.             fn.apply(obj, arguments);
  55.         };
  56.         window.addEventListener ? obj.addEventListener(ev, F, false) : obj.attachEvent("on" + ev, F);
  57.     },
  58.     Switch : function(index){
  59.         for(var n = 0,len = this.hd.length; n < len; n++){
  60.             this.hd[n].className="";
  61.             this.bd[n].style.display = "none";
  62.         }
  63.         this.hd[index].className = this.cur;
  64.         this.bd[index].style.display = "block";
  65.     },
  66.     Int : function(){
  67.         var timer = null,_this = this;
  68.         for(var i = 0, len = this.hd.length; i < len; i++)
  69.         {
  70.             this.hd[i].index = i;
  71.             this.bindEvent(this.hd[i], this.ev, function(){
  72.                 _this.index = this.index;
  73.                 if(_this.delay && !_this.auto){
  74.                     clearTimeout(timer);
  75.                     timer = setTimeout(function(){
  76.                         _this.Switch(_this.index);
  77.                     },_this.delay);
  78.                 }
  79.                 else{
  80.                     _this.Switch(_this.index);
  81.                 }
  82.             });
  83.         }
  84.     },
  85.     Auto : function(){
  86.         if(this.index >= this.hd.length){this.index = 0;}
  87.         this.Switch(this.index);
  88.         this.index ++;
  89.     },
  90.     AutoPaly : function(){
  91.         var timer = null,_this = this;
  92.         clearInterval(timer);
  93.         timer = setInterval(function(){
  94.             _this.Auto();
  95.         },_this.delay);
  96.         this.Events.bindEvent(this.obj, "mouseover", function(){
  97.             clearInterval(timer);
  98.             _this.Int();
  99.         });
  100.         this.Events.bindEvent(this.obj, "mouseout", function(){
  101.             timer = setInterval(function(){
  102.                 _this.Auto();
  103.             },_this.delay);
  104.         });
  105.     }
  106. };
  107. window.onload = function (){
  108.     //by 小鱼，2013/08/20
  109.     var obj = document.getElementById("oBox"),
  110.         aHeadList = obj.getElementsByTagName("div")[0].getElementsByTagName("a"),
  111.         aTabList = obj.getElementsByTagName("div")[1].getElementsByTagName("div");
  112.     /**
  113.      * @obj(ID) 自动播放时必选（用于暂停自动播放）
  114.      * @hd（必选）要切换的头部一组元素
  115.      * @bd（必选）要切换的内容一组元素
  116.      * @cur(可选，string) 头部选中的class，默认cur
  117.      * @ev(可选,string) 触发选项卡的事件，默认mouseover
  118.      * @delay（可选,number）延迟多少毫秒切换，自动播放时默认1000，其他默认0
  119.      * @auto（可选,bool）是否自动播放
  120.      **/
  121.     new TabSwitch({hd:aHeadList, bd:aTabList});
  122. }
  123. </script>
  124. </body>
  125. </html>

阅读(1349) | 评论(0) | 转发(0) |
0

上一篇：Python 异常处理

下一篇：Python 输出颜色文本

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6