编程 Javascript

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

Posted in Javascript onMay 13, 2015

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

<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程序设计有所帮助。

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

- Author -

休闲生活文化

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ext form 表单提交数据的方法小结

Aug 08 Javascript

jquery实现的元素的left增加N像素鼠标移开会慢慢的移动到原来的位置

Mar 21 Javascript

JS写的贪吃蛇游戏(个人练习)

Jul 08 Javascript

鼠标滑过出现预览的大图提示效果

Feb 26 Javascript

javascript读写json示例

Apr 11 Javascript

JavaScript中变量声明有var和没var的区别示例介绍

Sep 15 Javascript

Javascript闭包（Closure）详解

May 05 Javascript

jQuery实现的超酷苹果风格图标滑出菜单效果代码

Sep 16 Javascript

element-ui table span-method(行合并)的实现代码

Dec 20 Javascript

微信小程序点击生成朋友圈分享图(遇到的坑)

Jun 17 Javascript

ant-design-vue中tree增删改的操作方法

Nov 03 Javascript

javascript代码实现简易计算器

Jan 25 Javascript

JS实现模拟风力的雪花飘落效果

May 13 #Javascript

JavaScript实现鼠标点击后层展开效果的方法

May 13 #Javascript

浅谈javascript中的闭包

May 13 #Javascript

jQuery构造函数init参数分析续

May 13 #Javascript

jQuery构造函数init参数分析

May 13 #Javascript

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

May 12 #Javascript

JavaScript实现DIV层拖动及动态增加新层的方法

May 12 #Javascript

You might like

PHP4实际应用经验篇(7)

2006/10/09 PHP

有关phpmailer的详细介绍及使用方法

2013/01/28 PHP

PHP和javascript常用正则表达式及用法实例

2014/07/01 PHP

thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法

2014/10/30 PHP

php计算数组相同值出现次数的代码(array_count_values)

2015/01/20 PHP

PHP用continue跳过本次循环中剩余代码的注意点

2017/06/27 PHP

Aster vs KG BO3 第三场2.18

2021/03/10 DOTA

JS操作Cookies包括(读取添加与删除)

2012/12/26 Javascript

用表格输出1-1000之间的数字实现代码(附特效)

2013/04/21 Javascript

判断输入是否为空,获得输入类型的JS代码

2013/10/30 Javascript

javascript的switch用法注意事项分析

2015/02/02 Javascript

jQuery简单tab切换效果实现方法

2015/04/08 Javascript

理解js回收机制通俗易懂版

2016/02/29 Javascript

jQuery基于ajax方式实现用户名存在性检查功能示例

2017/02/10 Javascript

node.js+jQuery实现用户登录注册AJAX交互

2017/04/28 jQuery

Angular6 Filter实现页面搜索的示例代码

2018/12/02 Javascript

jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

2019/05/27 jQuery

layui 实现二级弹窗弹出之后关闭一级弹窗的方法

2019/09/18 Javascript

jquery获取input输入框中的值

2019/11/13 jQuery

[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T

2018/03/30 DOTA

python实现在无须过多援引的情况下创建字典的方法

2014/09/25 Python

Python通过Django实现用户注册和邮箱验证功能代码

2017/12/11 Python

Python实现的摇骰子猜大小功能小游戏示例

2017/12/18 Python

python实现简单的购物程序代码实例

2020/03/03 Python

Python ckeditor富文本编辑器代码实例解析

2020/06/22 Python

CSS3教程(8):CSS3透明度指南

2009/04/02 HTML / CSS

基于CSS3特效之动画:animation的应用

2013/05/09 HTML / CSS

HTML5 FileReader对象的具体使用方法

2020/05/22 HTML / CSS

美国受欢迎的女性牛仔裤品牌：DL1961

2016/11/12 全球购物

大学生入党思想汇报

2014/01/14 职场文书

商务英语专业求职信范文

2014/01/28 职场文书

工作失职检讨书

2015/01/26 职场文书

家长会感言

2015/08/01 职场文书

电子表的操作介绍说明书

2019/10/28 职场文书

用Python的绘图库(matplotlib)绘制小波能量谱

2021/04/17 Python

python绘图subplots函数使用模板的示例代码

2021/04/30 Python