// 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. IEnumerable接口的实现

    对象要实现可以迭代需IEnumerable接口并实现GetEnumerator方法.一下简单例子 public class SPEnumerable<T> : IEnumerable { ...

  2. C#综合揭秘——细说多线程（上）

    引言 本文主要从线程的基础用法,CLR线程池当中工作者线程与I/O线程的开发,并行操作PLINQ等多个方面介绍多线程的开发. 其中委托的BeginInvoke方法以及回调函数最为常用. 而 I/O线程 ...

  3. 纯css3代码写下拉菜单效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 第二周 WBS、NABCD查阅

    WBS WBS:工作分解结构(Work Breakdown Structure) 创建WBS:创建WBS是把项目可交付成果和项目工作分解成较小的,更易于管理的组成部分的过程. WBS是项目管理重要的专 ...

  5. log4j配置文件的详解

    1.配置根Logger,其语法为: log4j.rootLogger = [ level ] , appenderName, appenderName, … 其中,level 是日志记录的优先级,分为 ...

  6. poj2676 Sudoku（DFS）

    做了很久还是参考了别人的答案orz,其实也不难啊.我要开始学一下怎么写搜索了... 题目链接:poj2676 Sudoku 题解:暴力搜索,DFS每个空白格子所放数字. #include<cst ...

  7. Echart多图联动

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  8. Linux sed命令实例详解

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...

  9. 436. Find Right Interval ——本质：查找题目，因此二分！

    Given a set of intervals, for each of the interval i, check if there exists an interval j whose star ...

  10. Excel中连接函数CONCATENATE()

    直接API: CONCATENATE 函数语法具有下列参数 (参数:为操作.事件.方法.属性.函数或过程提供信息的值.): Text1 必需. 要连接的第一个文本项. Text2, ... 可选. 其 ...