JS实现标签页切换效果
2024-10-20 05:42:45
本文实例为大家分享了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
最新文章
- CSS3与页面布局学习总结(五)——Web Font与Sprite
- “is null”与“=”的使用
- PHP类方法重写原则
- MsSqlServer 复制分发概述
- Socket常见错误
- Linux 信号概念
- objc_msgSend()报错Too many arguments to function call ,expected 0,have3
- FW:: ehcache memcache redis 三大缓存男高音
- 免费获得NOD32 半年、1年 激活码-14.08.12到期
- 井字棋(Tic-Tac-Toe)
- IOS开发之----协议与委托(Protocol and Delegate) 实例解析
- Oracle 11gR2的完全卸载
- linux编curlDLL库so
- 怎么用php语言来做文件缓存
- 五子棋AI大战OC实现
- 解决:win10在空白处右键资源管理器重启的故障
- <;8>;Cocos Creator组件开发cc.Component
- mysql安装使用
- django-BaseCommand自带的权限分组
- Intellij IDEA 环境配置与使用
热门文章
- bzoj 3105: [cqoi2013]新Nim游戏【线性基+贪心】
- P3308 [SDOI2014]LIS(最小割+退流)
- JavaScript 入门案例
- python之定时器Timer
- AutoCAD2012启动错误 1308 源文件未找到
- VS2010创建C++静态链接库创建和使用
- [转]广义正交匹配追踪(gOMP)
- 文件输入输出C++操作
- egrep命令的实现 分类: 编译原理 2014-06-01 23:41 329人阅读 评论(0) 收藏
- JavaScript的执行