<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. [LeetCode] Single Number III 单独的数字之三

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  2. Ubuntu下基于Saprk安装Zeppelin

    前言 Apache Zeppelin是一款基于web的notebook(类似于ipython的notebook),支持交互式地数据分析,即一个Web笔记形式的交互式数据查询分析工具,可以在线用scal ...

  3. 语义网 (Semantic Web)和 web 3.0

    语义网=有意义的网络. "如果说 HTML 和 WEB 将整个在线文档变成了一本巨大的书,那么 RDF, schema, 和 inference languages 将会使世界上所有的数据变 ...

  4. mybatis generator maven插件自动生成代码

    如果你正为无聊Dao代码的编写感到苦恼,如果你正为怕一个单词拼错导致Dao操作失败而感到苦恼,那么就可以考虑一些Mybatis generator这个差价,它会帮我们自动生成代码,类似于Hiberna ...

  5. 看完这篇让你对各种前端build工具不再懵逼!

    本文原标题为:我终于弄懂了各种前端build工具 译者:@Christian 译文:https://www.sdk.cn/news/5412 原文:https://medium.freecodecam ...

  6. 五.Jenkins安装plugin

    http://blog.csdn.net/jmyue/article/details/9376237

  7. Ajax在静态页面中向指定url发送json请求获取返回的json数据

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. Junit的使用

    Junit是用于编写单元测试的框架.对于已经写好的函数,可以使用Junit生成单元测试代码. 自己的环境是:Linux Java环境是:JDK1.7 IDE:Eclipse Java EE IDE f ...

  9. Beta版本冲刺第四天

    Aruba 408 409 410 428 429 431 完成任务: 更改了一些边界模糊的图标 完善分享功能 立会照片: 燃尽图: commit: coding.net: https://codin ...

  10. 理解Compressed Sparse Column Format (CSC)

    最近在看<Spark for Data Science>这本书,阅读到<Machine Learning>这一节的时候被稀疏矩阵的存储格式CSC给弄的晕头转向的.所以专门写一篇 ...