基于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. netbeans 7安装xdebug调试php程序

    1.下载安装xdebug 先从xdebug官网下载对应php版本的xdebug组件,下载地址是:http://www.xdebug.org/download.php 如果不确定下载哪个版本的xdebu ...

  2. 匿名用户访问sharepoint2010中的列表

    Allow anonymous users to access listitems on a publishing site in SharePoint 2010 https://knowledge. ...

  3. 搭建hadoop环境,在win7的eclipse上远程操作(Linux上)hadoop2.6.0出错的一些总结

    问题1:在DFS Lcation 上不能对文件进行操作: 解决方法: 在hadoop上的每个节点上修改该文件 conf/mapred-site.xml,增加: <property> < ...

  4. sudo: /etc/sudoers 的模式为 0551,应为 0440

    环境:Ubuntu 12.04.4 LTS 32bit 本想修改/etc/sudoers文件,取消sudo权限的密码.但是因为sudoers文件无‘w’(写)的权限,然后用命令加写权限的时候加错了,加 ...

  5. fhq_treap 总结

    今天跟着zcg大神学了一发fhq_treap 发现在维护区间问题上fhq_treap不仅思维量小,而且代码量更小 是Splay的不错的替代品,不过至今还是有一些问题不能很好的解决 譬如查询某个数在序列 ...

  6. JavaWeb项目开发案例精粹-第2章投票系统-002配置文件及公共类

    1. <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5&qu ...

  7. nginx的location配置

    http://blog.sina.com.cn/s/blog_97688f8e0100zws5.html http://blog.csdn.net/yanook/article/details/100 ...

  8. 转:linux下Xampp安装与配置

    --转载时请保留下面,以供大家加我MSN,增强交流,共同学习.--姜庭华  msn: jaimejth@live.cn--博客:http://blog.csdn.net/jaimejth 软件下载在以 ...

  9. Restful api测试插件Swagger-UI

    现在多数的项目开发中,网站和移动端都需要进行数据交互和对接,这少不了使用REST编写API接口这种场景.例如我目前的工作,移动端交由了另一团队开发,不同开发小组之间就需要以规范和文档作为标准和协作基础 ...

  10. 10个提供免费PHP脚本下载的网站

    本文将重点介绍10个PHP脚本的免费资源下载站.之前推荐 <16个下载超酷脚本的热门网站>,这些网站除了PHP脚本,还有JavaScript.Java.Perl.ASP等脚本.如果你已是脚 ...