切换tab,并且动态添加标签

时间:2020-12-16 23:27:27

<script type="text/javascript">
 /*处理ie7、ie8不兼容getElementsByClassName*/
 if(!document.getElementsByClassName) {
  document.getElementsByClassName = function(className, element) {
   var children = (element || document).getElementsByTagName('*');
   var elements = new Array();
   for (var i=0;i<children.length;i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j=0;j<classNames.length;j++) {
     if (classNames[j] == className) {
      elements.push(child);
      break;
     }
    }
   }
   return elements;
  };
 }
 var newNode = document.createElement("i");
 var _titles = document.getElementsByClassName('title');
 var _items = document.getElementsByClassName('_items');
 var _as = document.getElementsByClassName('title_a');
 _items[0].style.display = 'block';
 _titles[0].insertBefore(newNode, _as[0]);
  for(var i = 0; i <_titles.length; i++){
   _titles[i].index = i; 
  _titles[i].onclick = function (){
   for(var j = 0;j< _items.length;j++){
     _items[j].style.display = 'none';    
   }
   _items[this.index].style.display = 'block';
   _titles[this.index].insertBefore(newNode, _as[this.index]);
  }
 } 
</script>

切换tab,并且动态添加标签的更多相关文章

  1. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  2. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  3. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. javascript的document中的动态添加标签

    document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScri ...

  5. C&num; 后台动态添加标签&lpar;span&comma;div&rpar; 以及模板添加

    很多时候.我们需要在后台用C#代码添加html标签.而不是在html源码中添加. 比如在html源码中简单的一个input 标签 <input type="type" nam ...

  6. innerHTML动态添加标签的注意事项

    在使用javascript动态添加页面上元素时,我们经常会使用DOM去逐个地将节点添加到文档碎片中,再将整个文档节点添加到DOM树中.其实还有一种方法动态添加元素:innerHTML. 我最近要将一大 ...

  7. EasyUI 布局 - 动态添加标签页(Tabs)

    首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...

  8. easyui 动态添加标签页,总结

    步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="e ...

  9. 解决EasyUI动态添加标签渲染问题

    以下代码用于Js脚本中: var Work_Content_Back = "<table width='99%' class='table' style='margin-bottom: ...

随机推荐

  1. 2016 - 1 - 23 json解析

    一: json   1. 什么是json 1.1 json是一种轻量级的数据格式,一般用于数据交互. 1.2 服务器返回给客户端的数据,一般都是JSON或者XML格式(文件下载除外).   2. JS ...

  2. SESSION和COOKIE的作用和区别,SESSION信息的存储方式,如何进行遍历?

    二者的定义:当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有没有 ...

  3. &lbrack;itint5&rsqb;完全二叉树节点个数的统计

    http://www.itint5.com/oj/#4 这题是利用完全二叉树的性质计算节点数目.那么是通过比较左右子树的最左结点的高度来看那边是满的,然后递归计算. //使用getLeftChildN ...

  4. Sublime 学习记录(四) Alignment 插件

    1)  Alignment 插件的安装 打开命令面板 输入pci 回车 输入Alignment 回车安装好即可 2)  Alignment 用处 用于代码对齐 3) Alignment 快捷键 默认为 ...

  5. windows下的mongodb下载安装

    1.首先从官网https://www.mongodb.org/下载mongodb的安装包,本人下载的是mongoDB3.2版本的.msi的文件,然后双击安装即可 2.点击next 3.compelte ...

  6. Linux 高性能服务器编程——多线程编程

    问题聚焦:     在简单地介绍线程的基本知识之后,主要讨论三个方面的内容:    1 创建线程和结束线程:    2 读取和设置线程属性:    3 线程同步方式:POSIX信号量,互斥锁和条件变量 ...

  7. Git 配置用户名、密码

    在终端输入: git config --global credential.helper store 然后git pull一次,输入一次用户名密码就会自动保存该用户名密码: 查看配置的用户信息: gi ...

  8. Markdown使用简介 及 学习资源整理

    Markdown资源整理 官网 http://daringfireball.net/projects/markdown/ http://jgm.github.io/stmd/spec.html htt ...

  9. c&plus;&plus;11 stl 学习之 shared&lowbar;ptr

    shared_ptr智能指针 shared_ptr 的声明初始化方式由于指针指针使用explicit参数 必须显示声明初始化shared_ptr<string> pNico = new s ...

  10. weex常用属性梳理

    之前发了一篇weex集成和开发的博客,主要是讲了weex开发环境的搭建和文件的编译.部署,还有就是一些个人对weex的理解,最近将原生的项目改造成weex的项目,也持续了有两个多月的时间了,后面我会发 ...