JS实现标签页切换效果


Posted in Javascript onMay 04, 2017

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

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
ES6下React组件的写法示例代码
May 04 #Javascript
JS触摸事件、手势事件详解
May 04 #Javascript
详解Angular 4.x Injector
May 04 #Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 #Javascript
详解Node.js串行化流程控制
May 04 #Javascript
纯原生js实现贪吃蛇游戏
Apr 16 #Javascript
js调用刷新界面的几种方式
May 03 #Javascript
You might like
非常好的php目录导航文件代码
2006/10/09 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
Vuex提升学习篇
2018/01/11 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
vue模块移动组件的实现示例
2020/05/20 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python中设置变量访问权限的方法
2015/04/27 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
python2.7到3.x迁移指南
2018/02/01 Python
python实现邮件自动发送
2019/08/10 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
会计辞职信范文
2014/01/15 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
小学优秀教师材料
2014/12/15 职场文书
护士实习自荐信
2015/03/06 职场文书
北京爱情故事观后感
2015/06/12 职场文书
休假证明书
2015/06/24 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL