<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. JAVA设计模式之2-简单工厂模式

    今天来介绍简单工厂模式,工厂模式包括简单工厂模式和抽象工厂模式,今天先讲简单工厂模式,然后引申到抽象工厂模式 在没有工厂模式前,我们创建类是直接new一个对象,比如下面所示,北汽有两个小型SUV,分别 ...

  2. [LeetCode] Walls and Gates 墙和门

    You are given a m x n 2D grid initialized with these three possible values. -1 - A wall or an obstac ...

  3. VS2015下如何用编译、调试程序。

    VS2015下如何用编译.调试程序. (通过实践给出截图) 安装步骤: 下载安装网址[VS2015下载地址](http://www.ithome.com/html/win10/164028.htm) ...

  4. 《如何正确学习JavaScript》读后小结

    在segmentfault上读的一篇学习JavaScript路线的文章,做个小结. 一.简介.数据类型.表达式和操作符 (1)<JavaScript权威指南>前言1-2章&< ...

  5. UI输入控件

    --UI输入控件 -- 输入控件 cc.uii.UIInput.new(table) --[[ 参数 table{ image 输入框图像,可以为图片名或者display.newScale9Sprit ...

  6. LAMP(1) 在VirtualBox里安装Ubuntu Server

    问题0.虚拟机中安装lamp环境 问题解决: 来自百度经验 问题1. 用putty远程登陆linux系统,显示network error connection refused 问题解决 问题2. my ...

  7. Android——WebView

    WebView用途 通过Intent调用系统浏览器: 引言: Uri uri = Uri.parse(url);//url为你要链接的地址 Intent intent = new Intent(Int ...

  8. Sensitive directory/file Integrity Monitoring and Checking

    catalogue . OSSEC . HashSentry: Host-Based IDS in Python . Afick . 检测流程 1. OSSEC OSSEC is an Open So ...

  9. Android源码——Activity进程内启动

    进程内启动Activity MainActivity组件向ActivityManagerService发送一个启动SubActivityInProcess组件的进程间通信请求: ActivityMan ...

  10. 通过WebStorm上传代码至github

    首先需要注册github帐号,具体方法自行百度/谷歌. 打开WebStorm,我用的是2016.2.4版本(如果你有edu邮箱的话,可以免费使用一年,不只是Webstorm,JetBrains全家桶都 ...