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

Prototype使用指南之base.js

Jan 10 Javascript

Json对象替换字符串占位符实现代码

Nov 17 Javascript

js 点击页面其他地方关闭弹出层(示例代码)

Dec 24 Javascript

Bootstrap所支持的表单控件实例详解

May 16 Javascript

jQuery封装的屏幕居中提示信息代码

Jun 08 Javascript

ionic实现滑动的三种方式

Aug 27 Javascript

微信小程序五星评分的实现实例

Aug 04 Javascript

使用jQuery给Table动态增加行、清空table的方法

Sep 05 jQuery

JavaScript简单实现动态改变HTML内容的方法示例

Dec 25 Javascript

vue-router之实现导航切换过渡动画效果

Oct 31 Javascript

JQuery表单元素取值赋值方法总结

May 12 jQuery

解决Vue 给mapState中定义的属性赋值报错的问题

Jun 22 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

如何实现给定日期的若干天以后的日期

2006/10/09 PHP

PHP+FLASH实现上传文件进度条相关文件下载

2007/07/21 PHP

PHP中输出转义JavaScript代码的实现代码

2011/04/22 PHP

php使用指定字符列表生成随机字符串的方法

2015/04/18 PHP

php实现无限级分类查询（递归、非递归）

2016/03/10 PHP

Yii2主题(Theme)用法详解

2016/07/23 PHP

Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解

2017/10/11 PHP

jquery 元素控制(追加元素/追加内容)介绍及应用

2013/04/21 Javascript

转换字符串为json对象的方法详解

2013/11/29 Javascript

jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

2015/03/01 Javascript

使用javaScript动态加载Js文件和Css文件

2015/10/24 Javascript

angular使用post、get向后台传参的问题实例

2017/05/27 Javascript

JS库之Three.js 简易入门教程(详解之一)

2017/09/13 Javascript

uni-app微信小程序登录授权的实现

2020/05/22 Javascript

Vue初始化中的选项合并之initInternalComponent详解

2020/06/11 Javascript

js实现html滑动图片拼图验证

2020/06/24 Javascript

python中对list去重的多种方法

2014/09/18 Python

Python使用Flask框架获取当前查询参数的方法

2015/03/21 Python

解析Python编程中的包结构

2015/10/25 Python

Python3实现发送QQ邮件功能（文本）

2017/12/15 Python

Numpy 将二维图像矩阵转换为一维向量的方法

2018/06/05 Python

python实现可视化动态CPU性能监控

2018/06/21 Python

python pands实现execl转csv 并修改csv指定列的方法

2018/12/12 Python

Python如何通过百度翻译API实现翻译功能

2020/04/02 Python

python爬虫构建代理ip池抓取数据库的示例代码

2020/09/22 Python

css3一款3D字体带阴影效果的实现步骤

2013/03/20 HTML / CSS

HTML5中外部浏览器唤起微信分享

2020/01/02 HTML / CSS

购买一个高级域名：BuyDomains

2018/03/11 全球购物

自考毕业自我鉴定范文

2013/10/27 职场文书

资源环境与城市管理专业推荐信

2013/11/30 职场文书

工程部经理岗位职责

2013/12/08 职场文书

初中差生评语

2014/12/29 职场文书

2015年留守儿童工作总结

2015/05/22 职场文书

婚庆开业庆典主持词

2015/06/30 职场文书

小学生反邪教心得体会

2016/01/15 职场文书

一文带你探究MySQL中的NULL

2021/11/11 MySQL