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开源框架-jQuery使用手册(1)
Mar 10 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
JS canvas实现画板和签字板功能
Feb 23 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
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
jQuery之网页换肤实现代码
2011/04/30 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
python中常用的九种预处理方法分享
2016/09/11 Python
python的unittest测试类代码实例
2017/12/07 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Django REST framework视图的用法
2019/01/16 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python3 翻转二叉树的实现
2019/09/30 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python简单实现插入排序实例代码
2020/12/16 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
2014年物业公司工作总结
2014/11/22 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
七年级作文之下雨天
2019/12/23 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js