基于jQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。

效果演示：

Javascript（jQuery）代码如下：

1 <script language="javascript" type="text/javascript">

2 $(document).ready(function(){

3    $("ul.menu li:first-child").addClass("current");

4    $("div.content").find("div.layout:not(:first-child)").hide();

5    $("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)});

6    $("ul.menu li").click(function(){

7        var c = $("ul.menu li");

8        var index = c.index(this);

9        var p = idNumber("No");

10        show(c,index,p);

11    });

12

13    function show(controlMenu,num,prefix){

14        var content= prefix + num;

15        $('#'+content).siblings().hide();

16        $('#'+content).show();

17        controlMenu.eq(num).addClass("current").siblings().removeClass("current");

18    };

19

20    function idNumber(prefix){

21        var idNum = prefix;

22        return idNum;

23    };

24 });

25 </script>

CSS样式代码如下：

1 <style type="text/css">

2 * {margin:0; padding:0}

3 ul,li { list-style:none}

4 .box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}

5 .tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}

6 .tagMenu h2 {font-size:12px; padding-left:10px;}

7 .tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}

8 ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer}

9 ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}

10 .content { padding:10px}

11 </style>

HTML结构代码如下：

1 <body>

2 <div class="box">

3    <div class="tagMenu">

4        <h2>No.1 Menu</h2>

5        <ul class="menu">

6            <li>Label 1.1</li>

7            <li>Label 1.2</li>

8            <li>Label 1.3</li>

9            <li>Label 1.4</li>

10        </ul>

11    </div>

12    <div class="content">

13        <div class="layout">infomation 1.1</div>

14        <div class="layout">infomation 1.2</div>

15        <div class="layout">infomation 1.3</div>

16        <div class="layout">infomation 1.4</div>

17    </div>

18 </div>

19

20 <div class="box">

21    <div class="tagMenu">

22        <h2>No.2 Menu</h2>

23        <ul class="menu">

24            <li>Label 2.1</li>

25            <li>Label 2.2</li>

26            <li>Label 2.3</li>

27            <li>Label 2.4</li>

28        </ul>

29    </div>

30    <div class="content">

31        <div class="layout">infomation 2.1</div>

32        <div class="layout">infomation 2.2</div>

33        <div class="layout">infomation 2.3</div>

34        <div class="layout">infomation 2.4</div>

35    </div>

36 </div>

37 </body>

jQuery 制作的Tab标签切换选项卡的更多相关文章

  1. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  2. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  3. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  4. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  5. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  6. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. Vue指令：v-for的用法；v-bind绑定class的几种写法；tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  8. 很好用的Tab标签切换功能，延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  9. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

随机推荐

  1. Android串口通信（基于Tiny6410平台）

    友善之臂的Android系统有他们自己编写的一个串口通信程序,网上没有找到他的源代码,而且界面操作不在一个界面,不是很方便,这里我自己写了一个粗糙点的串口通信程序. 同样这里还是调用友善之臂的frie ...

  2. hdu 1757 A Simple Math Problem （矩阵快速幂，简单）

    题目 也是和LightOJ 1096 和LightOJ 1065 差不多的简单题目. #include<stdio.h> #include<string.h> #include ...

  3. java基础知识回顾之java Thread类学习（九）--wait和notify区别

    wait和sleep区别:  相同点:调用wait,sleep方法都可以是线程进入阻塞状态,让出cpu的执行权. 不同点:1.sleep必须指定时间,但是wait方法可以指定时间,也可以不指定时间. ...

  4. jmeter 使用聚合报告分析jtl文件

    对于jmeter测试生成产生的jtl文件除了使用jemter插件来产生csv或者结果,还可以直接用聚合报告来打开,下面来介绍一下怎么操作. 1. 产生jtl文件 注意,默认情况下聚合报告插件只能分析聚 ...

  5. 日期工具类TimeUnit

    import java.util.concurrent.TimeUnit; 2 3 public class TimeUnitDemo { 4 private TimeUnit timeUnit =T ...

  6. lintcode :最小路径和

    题目: 最小路径和 给定一个只含非负整数的m*n网格,找到一条从左上角到右下角的可以使数字和最小的路径. 样例   注意 你在同一时间只能向下或者向右移动一步 解题: 这个和求三角形的最小路径的差不多 ...

  7. lintcode：Find the Connected Component in the Undirected Graph 找出无向图汇总的相连要素

    题目: 找出无向图汇总的相连要素 请找出无向图中相连要素的个数. 图中的每个节点包含其邻居的 1 个标签和 1 个列表.(一个无向图的相连节点(或节点)是一个子图,其中任意两个顶点通过路径相连,且不与 ...

  8. 保障视频4G传输的流畅性，海康威视摄像头相关设置

    我们目前的rtsp视频解决方案如下: 摄像头<---------->NVR(通过4G上传)<---------->easydarwin<---------->自己的 ...

  9. 在PowerDesigner中设计概念模型

    原文:在PowerDesigner中设计概念模型 在概念模型中主要有以下几个操作和设置的对象:实体(Entity).实体属性 (Attribute).实体标识(Identifiers).关系(Rela ...

  10. [iOS]如何给Label或者TextView赋HTML数据

    // // ViewController.m // text // // Created by 李东旭 on 16/1/22. // Copyright © 2016年 李东旭. All rights ...