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 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
深入探讨前端框架react
Dec 09 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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 什么是PEAR?
2009/03/19 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
python 排列组合之itertools
2013/03/20 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
外科护士长工作总结
2015/08/12 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
nginx之内存池的实现
2022/06/28 Servers