<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. React反模式 —— 如何不使用JSX地动态显示组件

    欢迎指导与讨论 : ) 前言 文章的最后能写出以 Modal.open( ) 这种调用形式,动态显示React对话框组件的写法(类似于ant design),同时涉及数据交互(数据能异步地返回给调用者 ...

  2. vue-resource初体验

    这个插件是用于http请求的,类似于jquery的ajax函数,支持多种http方法和jsonp. 下面是resource支持的http方法. get: {method: 'GET'},save: { ...

  3. 滚来滚去,滚来滚去...Scroller完全解析

    API: 1 mScroller.getCurrX() //获取mScroller当前水平滚动的位置 2 mScroller.getCurrY() //获取mScroller当前竖直滚动的位置 3 m ...

  4. Android基础总结(五)

    HttpClient 发送get请求 创建一个客户端对象 HttpClient client = new DefaultHttpClient(); 创建一个get请求对象 HttpGet hg = n ...

  5. VR、AR、MR的区别

    VR.AR.MR定义: 什么是虚拟现实? 虚拟现实(Virtual Reality,简称VR,又译作灵境.幻真)是近年来出现的高新技术,也称灵境技术或人工环境.虚拟现实是利用电脑模拟产生一个三维空间的 ...

  6. 【BZOJ-4197】寿司晚宴 状压DP

    4197: [Noi2015]寿司晚宴 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 694  Solved: 440[Submit][Status] ...

  7. Beta阶段第八次Scrum Meeting

    情况简述 BETA阶段第八次Scrum Meeting 敏捷开发起始时间 2016/12/21 00:00 敏捷开发终止时间 2016/12/22 00:00 会议基本内容摘要 deadline临近 ...

  8. Linux终端使用代理服务器

    1.YUM添加代理服务器: [root@localhost /]# vim /etc/yum.conf 添加如下项目: proxy=http://172.16.1.188:8888/2.WGET添加代 ...

  9. Day12-mysql&&redis

    1. 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数 ...

  10. datagrid

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...