本文实例为大家分享了JS标签页切换的具体代码，供大家参考，具体内容如下

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
*{margin:0;padding:0;}
 #wrap{width:500px; margin:10px auto; }
 #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
 #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
 #tag .current{ color:#000; background:#ccc; }
 #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
</style>
</head>
<body>
<div id="warp">
 <ul id="tag">
  <li>标签一</li>
  <li>标签二</li>
  <li>标签三</li>
  <li>标签4</li>
  <li>标签5</li>
 </ul>
 <div id="tagContent">
  <div class="J_tabClass"> 内容一<br>内容一 </div>
  <div class="J_tabClass"> 内容二<br>内容二 </div>
  <div class="J_tabClass"> 内容三<br>内容三 </div>
  <div class="J_tabClass"> 内容4<br>内容4 </div>
  <div class="J_tabClass"> 内容4<br>内容5555555555555555 </div>
 </div>
</div>
<script type="text/javascript">
//nameSpace
var VVG = {};
VVG.DOM = {};
//创建getElementsByClassName方法
VVG.DOM.getElementsByClassName = function(str,parent,tag){
 //父节点存在
if(parent){
 // 当父节点为string类型时，查找DOM节点，否则直接引用parent
  parent = typeof parent == "string" ? document.getElementById(parent):parent;
  // parent为空时提示错误信息
if(!parent) alert("找不到标签，请检查参数是否正确");
 }else{
  // 未传值时，父节点为body
  parent = document.body;
 }
 // tagContent为节点类型，未传值时为all节点
 tag = tag || "*";
 // 在父节点查找子节点，建立空数组arr
var els = parent.getElementsByTagName(tag),arr=[];
 for(var i=0,n=els.length;i<n;i++){
  // 查找每个节点下的classname，以空格分离为一个k数组
for(var j=0,k=els[i].className.split(" "),l=k.length;j<1;j++){
   // 当K数组中有一个值与str值相等时，记住这个标签并推入arr数组
if(k[j]==str){
   arr.push(els[i]);
   break;
   }
  }
 }
 // 返回数组
return arr;
}
//创建TabManager对象
VVG.TabManager = function(oo){
   this.root = oo.root || "warp";
   this.tabUlId = oo.tabUlId||"tabUlId";
   this.tabConId = oo.tabConId||"tabConId";
   this.tabConClass = oo.tabConClass||"J_tabClass";
   this.trggle = oo.trggle || "click";
   this.currentCss = oo.currentCss || "current";
  }
VVG.TabManager.prototype = {
  tabChange:function(){
   // 获取UL的id
var ulid = document.getElementById(this.tabUlId);
   // 获取UL下的LI元素
var ulli = ulid.getElementsByTagName("li");
   // 获取内容盒子DIV元素
var tabConId = document.getElementById(this.tabConId);
   // 获取root下的div的class为特定值的对象数组
var tabConClasses = VVG.DOM.getElementsByClassName(this.tabConClass,this.root,"div");
   // 初始化
   ulli[0].className = this.currentCss;
   tabConClasses[0].style.display = 'block';
   for (var i = ulli.length - 1; i >= 0; i--) {
   // 赋值this 与 that,避免this混乱
var that = this;
   // 设置对象index属性
   ulli[i].index = i;
   // 设置对象的事件
   ulli[i]["on" + this.trggle] = function(){
    for(var j = tabConClasses.length - 1; j >= 0; j--){
     tabConClasses[j].style.display = "none";
     ulli[j].className = "";
    }
    tabConClasses[this.index].style.display = "block";
    this.className = that.currentCss;
   }
   }
  }
 }
// 新建对象实例
var TabManager1 = new VVG.TabManager(
 {
 root:"warp",//包裹tab对象的div层的ID名称，必填
 tabUlId:"tag",//TAB标签LI元素的父亲UL元素的ID名称，必填
 tabConId:"tagContent",//内容元素的包裹盒子的ID名称，必填
 trggle:"mouseover",//切换方式，默认为click，可选
 currentCss:"current",//TAB标签liy元素的当前CSS名称，默认为current
 tabConClass:"J_tabClass",//内容元素的CLASS名称，默认为J_tabClass
 }
);
// 调用对象方法
TabManager1.tabChange();
 
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，

出处至：　　脚本之家 http://www.jb51.net/article/112886.htm

JS实现标签页切换效果的更多相关文章

  1. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  2. html+css+js实现标签页切换

    CSS部分: #Tab { margin:0 auto; width:640px; border:none; position:absolute; z-index:9; margin-left:320 ...

  3. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  4. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  5. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  6. 【Android进阶】使用Andbase快速开发框架实现常见侧滑栏和滑动标签页组合效果

    最近闲来无事,在网上寻找源代码看,突然发现了一个国内技术牛人开发的快速开发框架Andbase,花了一天时间研究了下源码和怎么使用,现将开发常见的侧滑栏和滑动标签页组合效果的使用介绍个大家,希望可以减少 ...

  7. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  8. web前端中实现多标签页切换的效果

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

  9. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

随机推荐

  1. JS Promise API

    一.描述 我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以继续下一个任务. 这种“单线程”的好处就是 ...

  2. Ruby 动态生成变量

    创建: 2018/03/21 更新: 2018/03/22 把标题ruby首字母大写 方法一: eval将字符串作为代码执行, 故写在里边 eval("@#{view_name.to_s} ...

  3. [USACO 2011 Dec Gold] Threatening Letter【后缀】

    Problem 3: Threatening Letter [J. Kuipers, 2002] FJ has had a terrible fight with his neighbor and w ...

  4. Xors on Segments Codeforces - 620F

    http://codeforces.com/problemset/problem/620/F 此题是莫队,但是不能用一般的莫队做,因为是最优化问题,没有办法在删除元素的时候维护答案. 这题的方法(好像 ...

  5. 洛谷 P3690 【模板】Link Cut Tree （动态树） || bzoj 3282: Tree

    https://blog.csdn.net/saramanda/article/details/55253627 https://blog.csdn.net/CHHNZ/article/details ...

  6. 题解报告：hdu 2191 悼念512汶川大地震遇难同胞——珍惜现在，感恩生活（多重背包）

    Problem Description 急!灾区的食物依然短缺!为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元,而市场有m种大米,每种大米都是袋装产品, ...

  7. 使用HttpClient携带pfx证书调用HTTPS协议的WebService

    调用第三方服务时,厂商提供了一个WSDL文件.调用的地址和一个后缀为pfx的证书文件,通过SOUPUI记载证书是可以正常调用WebService服务,那么如何将该服务转换为代码呢? 咨询了厂商的支持, ...

  8. 选择排序 分类： 算法 c/c++ 2014-10-10 20:32 509人阅读 评论(0) 收藏

    选择排序(假设递增排序) 每次选取从当前结点到末尾结点中最小的一个与当前结点交换,每一轮固定一个元素位置. 时间复杂度O(n^2),空间复杂度O(1).下面的示例代码以带头结点的链表为存储结构: #i ...

  9. yum 安装报错：*epel: mirrors.aliyun.comError: xzcompressionnot available

    环境背景:epel源下载地址: http://mirrors.aliyun.com/Centos内核内核版本[root@nfs01 ~]# uname -r2.6.32-642.el6.x86_64= ...

  10. 抽象工厂模式和php实现

    抽象工厂模式: 抽象工厂模式(Abstract Factory Pattern):提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们具体的类.抽象工厂模式又称为Kit模式,属于对象创建型模式. ...