<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

JS 标签页切换(复杂)的更多相关文章

  1. JS 标签页切换

    一 <!DOCTYPE html><html><head><meta charset="utf-8"/><title>自 ...

  2. JS实现标签页切换效果

    本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  3. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  4. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  5. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  6. web前端中实现多标签页切换的效果

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

  7. python selenium-webdriver 标签页切换（十五）

    测试过程中有时候会遇到点击某个按钮或者链接会弹出新的窗口,这时候我们的操作的页面还保持着最初打开页面,但是此时我们需要操作新打开的页面上的功能,这个时候我们需要切换一下标签页 . 其实页面的切换与fr ...

  8. vue单页面条件下添加类似浏览器的标签页切换功能

    在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现... ...

  9. html+css+js实现标签页切换

    CSS部分: #Tab { margin:0 auto; width:640px; border:none; position:absolute; z-index:9; margin-left:320 ...

随机推荐

  1. 执行SQL语句---SELECT

    1.通常从MySQL数据库中检索数据有4个步骤: (1)发出查询: 用mysql_query发出查询. (2)检索数据: 用mysql_store_result/mysql_use_result (3 ...

  2. hdu多校第五场1002 （hdu6625） three arrays 字典树/dfs

    题意: 给你两个序列a,b,序列c的某位是由序列a,b的此位异或得来,让你重排序列ab,找出字典序最小的序列c. 题解: 如果能找到a,b序列中完全一样的值当然最好,要是找不到,那也尽量让低位不一样. ...

  3. 干货：Java正确获取客户端真实IP方法整理

    在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...

  4. 8-MySQL高级-主从-2

    详细配置主从同步的方法 主和从的身份可以自己指定,我们将虚拟机Ubuntu中MySQL作为主服务器,将Windows中的MySQL作为从服务器. 在主从设置前,要保证Ubuntu与Windows间的网 ...

  5. 1.springboot+ActiveMQ

    1.项目结构如下 pom.xml文件如下 <dependencies> <dependency> <groupId>junit</groupId> &l ...

  6. JS对象 数组连接 concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。 语法 arrayObject.concat(array1,array2,.arrayN)

    concat() 方法用于连接两个或多个数组.此方法返回一个新数组,不改变原来的数组. 语法 arrayObject.concat(array1,array2,...,arrayN) 参数说明: 注意 ...

  7. error while loading shared libraries: lib*.so: cannot open shared object file: No such file or directory

    动态库的搜索路径搜索的先后顺序是: 1.编译目标代码时指定的动态库搜索路径; 2.环境变量LD_LIBRARY_PATH指定的动态库搜索路径: 比如export LD_LIBRARY_PATH=/us ...

  8. Android开发 自定义View_白色圆型涟漪动画View

    代码: import android.animation.ValueAnimator; import android.content.Context; import android.graphics. ...

  9. VMware的使用-永久激活码

    1.在软件管理中下载安装VMware  版本为14.0   试用期为30天 2.在网上找的永久破解码 VMware 2018 v14.x 永久许可证激活密钥FF31K-AHZD1-H8ETZ-8WWE ...

  10. java多线程-AbstractQueuedSynchronizer

    大纲: AbstractQueuedSynchronizer简介 aqs基本结构 aqs应用-ReentrantLock.lock aqs应用-ReentrantLock.unlock aqs应用-S ...