编程 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 相关文章推荐

JavaScript 学习笔记二字符串拼接

Mar 28 Javascript

JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))

Jul 17 Javascript

获取下拉列表框的值是数组，split，$.inArray示例

Nov 13 Javascript

Node.js中使用事件发射器模式实现事件绑定详解

Aug 15 Javascript

js解决select下拉选不中问题

Oct 14 Javascript

js仿腾讯QQ的web登陆界面

Aug 19 Javascript

微信小程序向左滑动删除功能的实现

Mar 10 Javascript

js表单序列化判断空值的实例

Sep 22 Javascript

AngularJS 事件发布机制

Aug 28 Javascript

JavaScript学习笔记之图片库案例分析

Jan 08 Javascript

vue在响应头response中获取自定义headers操作

Jul 24 Javascript

JavaScript中EventBus实现对象之间通信

Oct 18 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

php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法

2012/03/27 PHP

PHP生成短网址的3种方法代码实例

2014/07/08 PHP

Yii调试SQL的常用方法

2014/07/09 PHP

php实现上传图片保存到数据库的方法

2015/02/11 PHP

通过Mootools 1.2来操纵HTML DOM元素

2009/09/15 Javascript

JQuery写动态树示例代码

2013/07/31 Javascript

JavaScript检测浏览器cookie是否已经启动的方法

2015/02/27 Javascript

jQuery在页面加载时动态修改图片尺寸的方法

2015/03/20 Javascript

JavaScript中setMonth()方法的使用详解

2015/06/11 Javascript

js实现简单排列组合的方法

2016/01/27 Javascript

三个js循环的关键字示例(for与while)

2016/02/16 Javascript

jQuery获取单击节点对象的方法

2016/06/02 Javascript

js简单正则验证汉字英文及下划线的方法

2016/11/28 Javascript

Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

2016/12/30 Javascript

Bootstrap进度条与AJAX后端数据传递结合使用实例详解

2017/04/23 Javascript

Angularjs 1.3 中的$parse实例代码

2017/09/14 Javascript

koa2使用ejs和nunjucks作为模板引擎的使用

2018/11/27 Javascript

JavaScript继承与聚合实例详解

2019/01/22 Javascript

vue通过过滤器实现数据格式化

2020/07/20 Javascript

[04:07]显微镜下的DOTA2第八期——英雄复活动作

2014/06/24 DOTA

python操作gmail实例

2015/01/14 Python

python在linux系统下获取系统内存使用情况的方法

2015/05/11 Python

使用Python进行QQ批量登录的实例代码

2018/06/11 Python

Python实现识别图片内容的方法分析

2018/07/11 Python

elasticsearch python 查询的两种方法

2019/08/04 Python

在Python中获取操作系统的进程信息

2019/08/27 Python

详解Python3 中的字符串格式化语法

2020/01/15 Python

python读取图像矩阵文件并转换为向量实例

2020/06/18 Python

Python如何定义有可选参数的元类

2020/07/31 Python

GE设备配件：GE Appliance Parts（家电零件、配件和滤水器）

2018/11/28 全球购物

Keds加拿大官网：购买帆布运动鞋和皮鞋

2019/09/26 全球购物

经典安踏广告词

2014/03/21 职场文书

暑假安全教育广播稿

2014/09/10 职场文书

办公室文员工作自我鉴定

2014/09/19 职场文书

创建文明城市倡议书

2015/04/28 职场文书

小学班主任工作随笔

2015/08/15 职场文书