<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. 解读ASP.NET 5 & MVC6系列(10):Controller与Action

    我们知道在MVC5和之前的版本,两个框架的生命周期是不一样的,在新版MVC6中,MVC Controller/Web API Controller已经合二为一了,本章我们主要讲解Controller和 ...

  2. Java并发_volatile实现可见性但不保证原子性

    读后感 介绍了volatile实现可见性的基本原理 介绍了volatile不能实现原子性的示例,volatile复合操作不能实现原子性,读取值后在自增前改值可能被其它线程读取并修改,自增后刷新值可能会 ...

  3. HTML之form表单和input系列

    <form method="POST" action="/host"> <input class="c1" type=&q ...

  4. BZOJ 2424: [HAOI2010]订货

    2424: [HAOI2010]订货 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 915  Solved: 639[Submit][Status][ ...

  5. OS命令注入中的空格

    1.bash 空格可以替换为%20.%09(tab).%2b(+) in url.{IFS} 2.Win shell 空格可以替换为%20.%09(tab).%0b.%0c.%2b(+) in url

  6. Linux创建WiFi热点

    手机流量用完,需要开WiFi,由于是LinuxMint,感觉配置还算容易,找到一个不错的教程,收藏一下,以备后用.除了修改配置文件那步在我的电脑不需要外其他基本正确,而且Mint本来就衍生自Ubunt ...

  7. Web系统大规模并发——电商秒杀与抢购

    电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...

  8. Android 热修复方案Tinker

    转自:http://blog.csdn.net/l2show/article/details/53925543 Android 热修复方案Tinker(一) Application改造 Android ...

  9. Base64编码【转】

    转http://www.cnblogs.com/luguo3000/p/3940197.html 开发者对Base64编码肯定很熟悉,是否对它有很清晰的认识就不一定了.实际上Base64已经简单到不能 ...

  10. JavaWeb学习笔记——过滤器

    JSP可以完成的功能Servlet都可以完成,但是Servlet具备的很多功能是JSP所不具备的. 从使用上来看,Servlet可以分成简单Servlet.过滤Servlet(过滤器)和监听Servl ...