我是靠谱客的博主 精明小鸭子,这篇文章主要介绍jquery简单实现带渐显效果的选项卡菜单代码,现在分享给大家,希望可以做个参考。

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码。分享给大家供大家参考。具体如下:

带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动。

运行效果截图如下:

在线演示地址如下:

http://demo.uoften.com/js/2015/jquery-cha-style-tab-menu-codes/

具体代码如下:

复制代码
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>带渐显效果的选项卡菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body { background: #f0f0f0; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 { font-size: 3em; margin: 20px 0; } .container { width: 500px; margin: 10px auto; } ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a { color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } </style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> </head> <body> <div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">tab1</a></li> <li><a href="#tab2" id="">tab2</a></li> <li><a href="#tab3">tab3</a></li> <li><a href="#tab4">tab4</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content" style="display: block;"> 111111111111111 </div> <div id="tab2" class="tab_content" style="display: none;"> 222222222222222 </div> <div id="tab3" class="tab_content" style="display: none;"> 333333333333333 </div> <div id="tab4" class="tab_content" style="display: none;"> 444444444444444 </div> </div> </div> </body> </html>

希望本文所述对大家的jquery程序设计有所帮助。

最后

以上就是精明小鸭子最近收集整理的关于jquery简单实现带渐显效果的选项卡菜单代码的全部内容,更多相关jquery简单实现带渐显效果内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(143)

评论列表共有 0 条评论

立即
投稿
返回
顶部