文档章节

jQuery实现点击式选项卡

天王盖地虎
 天王盖地虎
发布于 2016/11/11 22:20
字数 394
阅读 4
收藏 0

参考:jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动

效果如下:


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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< style type = "text/css" >
     body{
         font-size: 13px;
     }
     ul,li{
         margin: 0;padding: 0;
         list-style: none;
     }
     #menu li{
         text-align: center;
         float: left;
         padding: 5px;
         margin-right: 2px;
         width: 50px;
         cursor: pointer;
     }
     #menu li.tabFocus{
         width: 50px;
         font-weight: bold;
         background-color: #f3f2e7;
         border: solid 1px #666;
         border-bottom: 0;
         z-index: 100;
         position: relative;
     }
     #content{
         width: 260px;
         height: 80px;
         padding: 10px;background-color: #f3f2e7;
         clear: left;
         border: solid 1px #666;
         position: relative;
         top: -1px;
     }
     #content li{
         display: none;
     }
     #content li.conFocus{
         display:block;
     }
      
  
</ style >
< script type = "text/javascript" src = "jquery-1.4.4.js" ></ script >
< script type = "text/javascript" >
     $(function(){
         $("#menu li").each(function(index) {//遍历选项卡
             $(this).click(function() {//注册每个选项卡点击事件
                 $("#menu li.tabFocus").removeClass('tabFocus');
                 $(this).addClass('tabFocus');//增加当前选中项样式
                 //显示选项卡对应的内容并影藏不被选中的内容
                 $("#content li:eq("+index+")").show().siblings().hide();
             });
         });
  
  
     });
</ script >
< title >jQuery实现选项卡</ title >
</ head >
< body >
     < ul id = "menu" >
         < li class = "tabFocus" >家居</ li >
         < li >电器</ li >
         < li >二手</ li >
     </ ul >
     < ul id = "content" >
         < li class = "tabFocus" >家居内容</ li >
         < li >电器内容</ li >
         < li >二手内容</ li >
     </ ul >
</ body >
</ html >






© 著作权归作者所有

天王盖地虎
粉丝 13
博文 134
码字总数 124474
作品 0
昌平
程序员
私信 提问
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5K
5
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
818
5
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
61
0
39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign
2012/09/12
27.6K
6
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.6K
11

没有更多内容

加载失败,请刷新页面

加载更多

面试官问:平时碰到系统CPU飙高和频繁GC,你会怎么排查?

处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题。当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警。本文主要针对系统运...

Java高级架构师n
15分钟前
6
0
面向对象编程

1、类和对象 类是对象的蓝图和模板,而对象是实例;即对象是具体的实例,类是一个抽象的模板 当我们把一大堆拥有共同特征的对象的静态特征(属性)和动态特征(行为)都抽取出来后,就可以定...

huijue
今天
12
0
redis异常解决 :idea启动本地redis出现 jedis.exceptions.JedisDataException: NOAUTH Authentication required

第一次安装在本地redis服务,试试跑项目,结果却出现nested exception is redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication required错误,真是让人头疼 先检查一...

青慕
今天
23
0
Spring 之 IoC 源码分析 (基于注解方式)

一、 IoC 理论 IoC 全称为 Inversion of Control,翻译为 “控制反转”,它还有一个别名为 DI(Dependency Injection),即依赖注入。 二、IoC方式 Spring为IoC提供了2种方式,一种是基于xml...

星爵22
今天
28
0
Docker安装PostgresSql

Docker安装PostgresSql 拉取docker镜像 # docker pull postgres:10.1010.10: Pulling from library/postgres9fc222b64b0a: Pull complete 38296355136d: Pull complete 2809e135bbdb: Pu......

Tree
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部