// 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. 在腾讯云上创建您的SQL Cluster(3)

    版权声明:本文由李斯达原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/250 来源:腾云阁 https://www.qclo ...

  2. 1.3 ASP.NET MVC生命周期

    ASP.NET MVC的执行生命周期主要分为三个阶段,分别是网址路由对比.执行控制器与动作.执行视图并返回结果.从ASP.NET MVC接受HTTP请求到返回HTTP响应的过程如下图所示.

  3. python中文处理

    源码文件为utf-8格式  CODEC = 'utf-8': VS在“高级保存选项”中选择“UTF-8 65001” input(u'中文');print(u'中文')

  4. Remove Duplicates from Sorted List II [LeetCode]

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  5. 张艾迪Eidyzhang：解码天才Eidyzhang的诞生

    AOA解码:天才Eidyzhang的诞生AOA深度解读:世界第一天才Eidyzhang: (TheWorldNo.1Girl+TheWorldNo.1InterentGirl+世界第一女孩+世界第一互 ...

  6. dubug

    1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ============================= 作用域 功能 快捷键 全局 ...

  7. MYSQL的三种注释

    #CREATE SCHEMA `paw-jj` DEFAULT CHARACTER SET utf8 ; -- select * from vrv_paw_terminalinfo /*  selec ...

  8. js——倒计时

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

  9. 百度Tera数据库介绍——类似cassandra，levelDB

    转自:https://my.oschina.net/u/2982571/blog/775452 设计背景 百度的链接处理系统每天处理万亿级的超链数据,在过去,这是一系列Mapreduce的批量过程,对 ...

  10. 利用ODBC从SQLServer向Oracle中导数据

    1.首先要在Oracle数据库中建对应的表,Oracle数据库中的字段类型和Sql Server 有所不同,Oracle中常用的有varchar2.integer.nchar.date,Sql Ser ...