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 相关文章推荐
javascript高级学习笔记整理
Aug 14 Javascript
jquery 笔记 事件
Nov 02 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
vant 时间选择器--开始时间和结束时间实例
Nov 04 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不用递归实现无限分级的例子分享
2014/04/18 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
深入讲解Python编程中的字符串
2015/10/14 Python
python实战教程之自动扫雷
2018/07/13 Python
浅谈python中get pass用法
2019/03/19 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
浅析NumPy 切片和索引
2020/09/02 Python
python3处理word文档实例分析
2020/12/01 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题