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

jquery中ajax学习笔记3

Oct 16 Javascript

解析js如何获取当前url中的参数值并复制给input

Jun 23 Javascript

JS+CSS实现大气的黑色首页导航菜单效果代码

Sep 10 Javascript

关于javascript中dataset的问题小结

Nov 16 Javascript

基于JavaScript实现div层跟随滚动条滑动

Jan 12 Javascript

JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招

Mar 07 Javascript

jQuery弹出遮罩层效果完整示例

Sep 13 Javascript

jquery ajaxfileupload异步上传插件

Nov 21 jQuery

JS遍历DOM文档树的方法实例详解

Apr 03 Javascript

JS字符串和数组如何实现相互转化

Jul 02 Javascript

Ant Design Vue table中列超长显示...并加提示语的实例

Oct 31 Javascript

浅析JavaScript中的事件委托机制跟深浅拷贝

Jan 20 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

Protoss魔法科技

2020/03/14 星际争霸

20个2014年最优秀的PHP框架回顾

2014/10/22 PHP

yii2使用ajax返回json的实现方法

2016/05/14 PHP

PHP5.5安装PHPRedis扩展及连接测试方法

2017/01/22 PHP

PHP实现百度人脸识别

2019/05/06 PHP

jquery实现图片渐变切换兼容ie6/Chrome/Firefox

2013/08/02 Javascript

获取鼠标在div中的相对位置的实现代码

2013/12/30 Javascript

node.js中的fs.unlinkSync方法使用说明

2014/12/15 Javascript

BootStrap使用file-input插件上传图片的方法

2016/09/05 Javascript

Bootstrap基本插件学习笔记之按钮(21)

2016/12/08 Javascript

Vue 页面切换效果之 BubbleTransition(推荐)

2018/04/08 Javascript

Vue 事件处理操作实例详解

2019/03/05 Javascript

原生JS实现随机点名项目的实例代码

2019/04/30 Javascript

jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】

2019/05/17 jQuery

JS中的算法与数据结构之列表(List)实例详解

2019/08/16 Javascript

原生js实现五子棋游戏

2020/05/28 Javascript

手机浏览器唤起微信分享(JS)

2020/10/11 Javascript

[02:32]DOTA2英雄基础教程美杜莎

2014/01/07 DOTA

[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮

2016/02/27 DOTA

[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱

2016/03/25 DOTA

使用PYTHON接收多播数据的代码

2012/03/01 Python

python正则表达式爬取猫眼电影top100

2018/02/24 Python

python中字符串内置函数的用法总结

2018/09/13 Python

一百多行python代码实现抢票助手

2018/09/25 Python

Python实现的KMeans聚类算法实例分析

2018/12/29 Python

python字典嵌套字典的情况下找到某个key的value详解

2019/07/10 Python

python3 批量获取对应端口服务的实例

2019/07/25 Python

python检测服务器端口代码实例

2019/08/31 Python

Python大数据之使用lxml库解析html网页文件示例

2019/11/16 Python

Python发送邮件封装实现过程详解

2020/05/09 Python

python 监控logcat关键字功能

2020/09/04 Python

加拿大时装零售商：Influence U

2018/12/22 全球购物

委托协议书范本

2014/04/22 职场文书

大型活动组织方案

2014/05/10 职场文书

分公司总经理岗位职责

2014/07/30 职场文书

2019自荐信该如何写呢？

2019/07/05 职场文书