// Tab切换栏

function setTab(name, m, n) {

    for (var i = 1; i <= n; i++) {

        var menu = document.getElementById(name + i);

        var showDiv = document.getElementById("cont_" + name + "_" + i);

        menu.className = i == m ? "on" : "";

        showDiv.style.display = i == m ? "block" : "none";

    }

}

调用的时候这样调用： onmousedown='setTab("two",2,3)'

Tab切换栏的更多相关文章

  1. 前端实现Tab切换栏

    tab切换,所需的 UI 只有两组元素 - Header 和 Tab,下面介绍几种不同的实现方法和他们的优缺点 本文主要说一些 CSS 的实现方法.最好的方法是 第四种 => label + i ...

  2. element UI中的tab切换栏

    html代码:(用的是el-tab组件) <el-tabs v-model="activeIndex" type="border-card" @tab-c ...

  3. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

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

  4. 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  5. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  6. jq 版的tab切换

    ta切换是在前端中非常常见的一种效果,网上的效果很多.但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用. var tabs = function (tab, c ...

  7. 如何用RadioButton做一个底部的切换栏

    上面的效果是用Radio进行制作的,一般我们做底部的切换栏的时候需要让按钮和文字都有一个选中的状态,然后根据点击不同的按钮触发不同的页面,这里的页面一般都是fragment做的.这里我们不讨论复杂的东 ...

  8. vue仿淘宝订单状态的tab切换效果

    <div class="navigation">  //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...

  9. vue2.0使用动态组件实现tab切换效果（vue-cli）

    <template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...

随机推荐

  1. spring boot学习

    window10的环境下 使用apache-maven-3.3.9 到https://github.com/spring-projects/spring-boot 下载源码包,解压到c:\spring ...

  2. 坑爹的对GBK编码的字符进行url编码

    url编码又叫百分号编码 现在的url编码十分混乱,都没有按照新标准来 对汉字都按照不同的编码后再进行url编码 2005年1月发布的RFC 3986,强制所有新的URI必须对未保留字符不加以百分号编 ...

  3. WebContentGenerator

    用于提供如浏览器缓存控制.是否必须有session开启.支持的请求方法类型(GET.POST等)等,该类主要有如下属性: Set<String>   supportedMethods:设置 ...

  4. CentOS 7 /RHEL 7: How To Change The System Locale

    The system localeare used to control the language setting of system services and the UI before the u ...

  5. python常见的模块

    Python内置模块名称 功能简介 详细解释/使用示例 os 和操作系统相关 os.path — Common pathname manipulations sys 和系统相关 sys — Syste ...

  6. javaSE之如何将一个文件复制到另一个文件

    /* * (1). 文件字符输入,输出流 * 文件字节输入,输出流的read和write方法使用 * 字节数组读写数据,即以字节为单位处理数据,因此,字节流不能很好的操作Unicode字符 * ,比如 ...

  7. Sql语句统计多表个数并求和

    ) FROM ((SELECT BaseID FROM dbo.Life_cheliang WHERE BaseCreateDate BETWEEN '2015-6-5' AND '2015-6-11 ...

  8. java 多线程——一个定时调度的例子

    java 多线程 目录: Java 多线程——基础知识 Java 多线程 —— synchronized关键字 java 多线程——一个定时调度的例子 java 多线程——quartz 定时调度的例子 ...

  9. 设置浏览器使用的dom模式为IE7

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>设置浏览器使用的dom模式为 ...

  10. Linux系统中的日常监控知识点

    1.命令熟悉之w [xiongchao@oc3006745124 Desktop]$ w :: up :, users, load average: 1.48, 1.19, 1.11 USER TTY ...