// 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. jsp 页面 jstl 日期的计算

    1. <% page import ="java.util.Date"%> 2. <% Date date = new Date(); date = new Da ...

  2. 在centos6.5中安装jdk

    一.下载jdk 下载地址 www.oracle.com,我这次安装的jdk是1.6版本的,以.bin结尾的,名称为 jdk-6u45-linux-i586.bin 二.安装步骤 1.在 /usr目录下 ...

  3. selenium+python笔记8

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ @desc: 定制浏览器 """ imp ...

  4. 获取本机 Android 默认sha1 秘钥

    获取本机 Android 默认sha1 秘钥: 以Windows操作系统为例,打开CMD,运行以下指令将得到所有默认秘钥. keytool -list -v -keystore C:\Users\pa ...

  5. [Hadoop 周边] Hadoop资料收集【转】

    原文网址: http://www.iteblog.com/archives/851 最直接的学习参考网站当然是官网啦: http://hadoop.apache.org/ Hadoop http:// ...

  6. [Java] 数据库连接管理类

    package com.wdcloud.monitoring.common; /** * @Description: TODO * @date: 2015��11��19�� ����10:23:16 ...

  7. C/C++ 关于生成静态库（lib)/动态库(dll)文件如何使用(基于windows基础篇)

    1. 首先,如何制作一个静态库(lib)? 额, 对于静态库,我们知道,里头是不应该有Main函数,它只是一个配合文件.之所以称之为lib静态库,其实就是指,我们需要用到lib里头的函数时,我们才会去 ...

  8. hdu----(4308)Saving Princess claire_(搜索)

    Saving Princess claire_ Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  9. Spring配置文件解析--依赖注入

    1.构造器注入基于构造器的DI通过调用带参数的构造器来实现,每个参数代表着一个依赖.此外,还可通过给stattic工厂方法传参数来构造bean.构造器参数解析根据参数类型进行匹配,如果bean的构造器 ...

  10. 初始maven

    Apache Maven 是一个软件项目管理和综合工具.基于项目对象模型 (POM) 的概念,Maven 可以管理一个项目的生成. 报告和文档从一块中央的信息.在JavaEE中,我们可以使用Maven ...