js实现仿Windows风格选项卡和按钮效果

 　　本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法。分享给大家供大家参考。具体实现方法如下：

　　?

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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
<!--
body{
font-family: 'MS Shell Dlg', 宋体, Tahoma;
font-size: 12px;
background-color: #336699;
color:#000000;
}
td, div, input, textarea{
font-family: 'MS Shell Dlg', 宋体, Tahoma;
font-size: 12px;
cursor: default;
}
.title{
background-color: #000080;
color:#fdf7d3;
padding: 1;
font-family:宋体;
font-size:12px;
}
.up{
background-color: #cccccc;
color:#000000;
border: 2px outset #ffffff
}
.down{
background-color: #cccccc;
border:2px inset #ffffff
}
.up1{
background-color: #cccccc;
color: #000000;
border: 1px outset #ffffff
}
.down1{
background-color:#cccccc;
border:1px inset #ffffff
}
.l {
background-color: #cccccc;
height: 18px;
border-left: 2px outset #ffffff;
border-right: 2px outset #ffffff;
color:#000000;
border-top: 2px outset #ffffff;
padding-top: 2;
height:18
}
.lc {
background-color: #cccccc;
height: 18px;
border-left: 2px outset #ffffff;
border-right: 2px outset #ffffff;
color:#000000;
border-top: 2px outset #ffffff;
padding-top: 2;
height:20
}
.l-h{
background-color: #cccccc;
border-left: 2px outset #ffffff ;
border-top: 2px outset #ffffff;
color:#000000;
}
.l-c{
background-color: #cccccc;
border-top: 2px outset #ffffff
}
.l-r {
background-color: #cccccc;
border-right: 2px outset #ffffff;
border-top: 2px outset #ffffff;
color:#000000;
}
.l-hc{
background-color: #cccccc;
border-left: 2px outset #ffffff;
color:#000000;
}
.l-cc{
background-color: #cccccc;
color:#000000;
}
.l-rc {
background-color: #cccccc;
border-right: 2px outset #ffffff;
color:#000000;
}
td{
color:#000000;
}
-->
</style>
<title>显示属性</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no>
<SCRIPT LANGUAGE="JavaScript">
<!--
function restore()
{
td1.className="l";
td2.className="l";
td3.className="l";
td4.className="l";
td5.className="l";
td6.className="l";
td_1.className="l-h";
td_2.className="l-c";
td_3.className="l-c";
td_4.className="l-c";
td_5.className="l-c";
td_6.className="l-c";
w1.style.display="none";
w2.style.display="none";
w3.style.display="none";
w4.style.display="none";
w5.style.display="none";
w6.style.display="none";
}
function c1()
{
td1.className="lc";
td_1.className="l-hc";
w1.style.display="block";
}
function c2()
{
td2.className="lc";
td_2.className="l-cc";
w2.style.display="block";
}
function c3()
{
td3.className="lc";
td_3.className="l-cc";
w3.style.display="block";
}
function c4()
{
td4.className="lc";
td_4.className="l-cc";
w4.style.display="block";
}
function c5()
{
td5.className="lc";
td_5.className="l-cc";
w5.style.display="block";
}
function c6()
{
td6.className="lc";
td_6.className="l-cc";
w6.style.display="block";
}
//-->
</SCRIPT>
<form name="free" method="post" target="_target">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="400" height="61">
<tr>
<td width="50" height="20" align="center"
valign="bottom" onclick=restore();c1();>
<div id="td1" class="lc">背景</div></td>
<td width="50" height="20" align="center"
valign="bottom" onclick=restore();c2();>
<div id="td2" class="l">屏保</div></td>
<td width="50" height="20" align="center"
valign="bottom" onclick=restore();c3();>
<div id="td3" class="l">外观</div></td>
<td width="50" height="20" align="center"
valign="bottom" onclick=restore();c4();>
<div id="td4" class="l">Web</div></td>
<td width="50" height="20" align="center"
valign="bottom" onclick=restore();c5();>
<div id="td5" class="l">效果</div></td>
<td width="50" height="20" align="center"
valign="bottom" onclick=restore();c6();>
<div id="td6" class="l">设置</div></td>
<td width="50" height="20" align="center" valign="bottom" ></td>
<td width="50" height="20" align="center" valign="bottom"></td>
</tr>
<tr style="">
<td width="50" height="1" align="center" class="l-hc" id="td_1" > </td>
<td width="50" height="1" align="center" class="l-c" id="td_2"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_3"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_4"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_5"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_6"> </td>
<td width="50" height="1" align="center" class="l-c" id="td_"> </td>
<td width="50" height="1" align="center" class="l-r" id="td_"> </td>
</tr>
<tr>
<td width="398" height="360" class="up" colspan="8"
style="border-top-style: solid; border-top-width: 0; padding: 5">
<p align="center">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0"
width="100%" height="325">
<tr>
<td width="100%" height="280">
<div align="center">
<center>
<div style="display:" id=w1><h1>1</h1></div>
<div style="display:none" id=w2><h1>2</h1></div>
<div style="display:none" id=w3><h1>3</h1></div>
<div style="display:none" id=w4><h1>4</h1></div>
<div style="display:none" id=w5><h1>5</h1></div>
<div style="display:none" id=w6><h1>6</h1></div>
</center>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</center>
<tr>
<td width="398" height="37" colspan="8"
style="border-top-style: solid; border-top-width: 0; padding: 5">
<p align="right"><input type="button" value="确定" name="_ok"
style="width: 60;height:22" class="up">
<input type="button" value="取消" name="_cancel"
style="width: 60;height:22" class="up" onclick="window.close();">
<input type="button" value="应用(A)" name="_apply"
style="width: 60;height:22" disabled class="up">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

　　运行效果如下：


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

时间： 2025-01-29 21:11:01

js实现仿Windows风格选项卡和按钮效果的相关文章

js实现仿Windows风格选项卡和按钮效果实例_javascript技巧

本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style type="text/css"> <!-- body{ font-family: 'MS Shell Dl

js中仿bootstarp风格的toggle开关按钮效果

效果如下 原理: 这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui;这个效果依赖html5的transition, 所以浏览器兼容成问题:从flat-ui中把这个效果的js和html,以及css给拨离出来: 整体的效果是依赖于jQuery, 当用户点击了label按钮会触发input的click事件, 然后判断给父级添加不同的classname: css: .toggle {             background-color: #8AB9E3;           

JS实现仿Windows经典风格的选项卡Tab切换代码_javascript技巧

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码.分享给大家供大家参考,具体如下: 这款仿Windows风格的选项卡,带有灰色的立体感,示例内容是用JS控制输出,只是为了演示功能,你在用的时候完全可以去掉的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-windows-style-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

JS+CSS实现仿msn风格选项卡效果代码_javascript技巧

本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

仿windows xp左侧菜单伸缩效果js特效

+网络配置中心 -站长手册 -动态域名 -DHCP服务 -ADSL设置 -MODEM设置 +安全配置中心 -入侵检测系统 -行为管理系统 -虚拟网系统 -防火墙系统 +系统报告中心 -系统状态 -网络流量图 -TCP连接 -系统日志 +高级配置中心 -安全远程访问 -密码设置 -系统更新 -系统备份 -系统恢复 -主机控制

js实现仿微博滚动显示信息的效果_javascript技巧

相信大家空闲的时候都会上上微博,推特等社交网站,每次我登陆微博时,我都会留意一下它有什么变化,小的有一些布局的变化,大的有API接口的改变等. 在首页登陆微博时,我们可以看到一栏"大家正在说",它滚动显示着当前每个人发送的微博:刚看到这个效果觉得挺有趣的,所以我们将在接下来的文中介绍实现滚动显示微博信息的效果. 我们细细观察了微博的"大家正在说",它是通过由上往下滚动来实现不断显示微博的,而且每一天新微博都是通过淡入效果显示的. 图1 微博"大家正在说&q

js实现iPhone界面风格的单选框和复选框按钮实例_javascript技巧

本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮.分享给大家供大家参考.具体如下: 这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

java实现仿windows 字体设置选项卡实例_java

想用java做一个像windows里一样的txt编辑软件,涉及到字体设置选项卡,在网上找了很久都没找到,就生气啦自己写一个,现在贴这里分享一下,下次再遇到这样的问题就不用自己亲自打代码啦! package 实验; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import java.awt

js实现类似菜单风格的TAB选项卡效果代码_javascript技巧

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht