<script>
        var oUL = document.getElementById('aboutTab-ul');
        var oLi = oUL.getElementsByTagName('li');
        var oDiv = document.getElementById('aboutTab-content');
        var oContent = oDiv.querySelectorAll('.tab-content');

        for (var i = 0; i < oLi.length; i++) {
            oLi[i].index = i;
            oLi[i].onclick = function() {
                for (var i = 0; i < oLi.length; i++) {
                    oLi[i].className = '';
                    oContent[i].className = 'tab-content';
                }
                this.className = 'cur';
                oContent[this.index].className += " active";
            }
        }
    </script>

//第二种写法

var oUL = document.getElementById('foodTab-ul');
var oLi = oUL.getElementsByTagName('li');
var oDiv = document.getElementById('foodTab-content');
var oContent = oDiv.querySelectorAll('.tab-content');

for (var i = 0; len = oLi.length, i < len; i++) {
    oLi[i].index = i;
    oLi[i].onclick = (function(i) {
        return function() {
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].className = '';
                oContent[i].className = 'tab-content';
            }
            this.className = 'cur';
            oContent[this.index].className += " active";
        };
    })(i);
};

tab 切换写法的更多相关文章

  1. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. 小程序之Tab切换(二)

    之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用.我们只需要配置app.json这个文件即可. 先看效果图: app.json代码:(有木有感 ...

  3. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  4. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  5. TAB切换与内容伸展闭合的结合

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  8. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  9. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

随机推荐

  1. 那些年我们学过的构造函数(构造方法,C#)

    构造函数也称构造方法,在面向对象中称为构造方法,在面向过程中称为构造函数;C#是面向对象的语言,所以以下都称为构造方法, OK,下面我们先看一下什么是构造函数 class Dog { //创建一个狗类 ...

  2. [LeetCode] Excel Sheet Column Number 求Excel表列序号

    Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...

  3. ajax的循环

    一.业务需求 在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签. 例如如下表格: 我有一系列的商品编号,我需要根据商品编号 ...

  4. 基本组件的使用——UITabBarController

    和UINavigationController的作用差不多,UITabBarController也可以在多个UIViewController中切换 这个控件的使用相对简单,只需要为该控件的viewCo ...

  5. perl

    introduction: http://www.yiibai.com/perl/perl_introduction.html functions: http://www.yiibai.com/per ...

  6. oracle数据查询

    select * from XMBL_EM_DBBACK where f_djbh='DB01201612270013'select * from flow_task_list where biz_d ...

  7. Python json.dumps 特殊数据类型的自定义序列化操作

    场景描述: Python标准库中的json模块,集成了将数据序列化处理的功能:在使用json.dumps()方法序列化数据时候,如果目标数据中存在datetime数据类型,执行操作时, 会抛出异常:T ...

  8. xp 下查看进程指令

    xp 下快速查看进程及关联 exe 的指令,刚发现,还没有测试 win7 和 win10 支持不支持. wmic process where creationclassname="win32 ...

  9. BZOJ2809: [Apio2012]dispatching

    传送门 主席树经典题. 首先把树搞出来,然后搞出来DFS序.然后离散化点权,在DFS序上建立主席树. 对于每个点对应的区间,查找对应的区间最大的点数即可. //BZOJ2809 //by Cydiat ...

  10. Python学习笔记(2) Python提取《釜山行》人物关系

    参考:http://www.jianshu.com/p/3bd06f8816d7 项目原理:   实验基于简单共现关系,编写 Python 代码从纯文本中提取出人物关系网络,并用Gephi 将生成的网 ...