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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
js友好的时间返回函数
Aug 24 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
JavaScript创建表格的方法
Apr 13 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
linux下php上传文件注意事项
2016/06/11 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
JavaScript 指导方针
2007/04/05 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
35个Python编程小技巧
2014/04/01 Python
python之import机制详解
2014/07/03 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
幼儿园新学期寄语
2014/01/18 职场文书
党建目标管理责任书
2014/07/25 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
人才市场接收函
2015/01/30 职场文书
事业单位岗位说明书
2015/10/08 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
民事调解协议书
2016/03/21 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL