编程 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 1.5 & scriptaculous 1.6.1 学习笔记

Sep 07 Javascript

javascript动态添加表格数据行(ASP后台数据库保存例子)

May 08 Javascript

JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动

Jun 29 Javascript

一个关于jqGrid使用的小例子(行按钮)

Nov 04 Javascript

封装了一个支持匿名函数的Javascript事件监听器

Jun 05 Javascript

JavaScript中使用document.write向页面输出内容实例

Oct 16 Javascript

jQuery菜单插件superfish使用指南

Apr 21 Javascript

浅谈箭头函数写法在ReactJs中的使用

Aug 22 Javascript

JS随机排序数组实现方法分析

Oct 11 Javascript

vue-router传参用法详解

Jan 19 Javascript

浅谈JS和jQuery的区别

Mar 27 jQuery

微信网页登录逻辑与实现方法

Apr 29 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简单封装了一些常用JS操作

2007/02/25 PHP

php内存缓存实现方法

2015/01/24 PHP

将PHP的session数据存储到数据库中的代码实例

2016/06/24 PHP

PHP实现求连续子数组最大和问题2种解决方法

2017/12/26 PHP

laravel5.0在linux下解决.htaccess无效和去除index.php的问题

2019/10/16 PHP

点击广告后才能获得下载地址

2006/10/26 Javascript

基于jquery1.4.2的仿flash超炫焦点图播放效果

2010/04/20 Javascript

javascript学习笔记(三) String 字符串类型介绍

2012/06/19 Javascript

javascript中的__defineGetter__和__defineSetter__介绍

2014/08/15 Javascript

jQuery实现的表头固定效果实例【附完整demo源码下载】

2016/08/01 Javascript

浅析script标签中的defer与async属性

2016/11/30 Javascript

javascript构造函数以及原型对象的理解

2017/01/13 Javascript

详解Javascript几种跨域方式总结

2017/02/27 Javascript

基于javaScript的this指向总结

2017/07/22 Javascript

Vue父子组件双向绑定传值的实现方法

2018/07/31 Javascript

全面分析JavaScript 继承

2019/05/30 Javascript

vue使用prop可以渲染但是打印台报错的解决方式

2019/11/13 Javascript

Python中一些自然语言工具的使用的入门教程

2015/04/13 Python

详解在Python程序中自定义异常的方法

2015/10/16 Python

详谈python http长连接客户端

2017/06/12 Python

Django项目中model的数据处理以及页面交互方法

2018/05/30 Python

Python计算开方、立方、圆周率,精确到小数点后任意位的方法

2018/07/17 Python

Python编写带选项的命令行程序方法

2019/08/13 Python

浅谈python3 构造函数和析构函数

2020/03/12 Python

Python面向对象魔法方法和单例模块代码实例

2020/03/25 Python

python连接mysql有哪些方法

2020/06/24 Python

浅谈CSS3动画的回调处理

2016/07/21 HTML / CSS

Gucci法国官方网站：意大利奢侈品牌

2018/07/25 全球购物

联想马亚西亚官方网站：Lenovo Malaysia

2018/09/19 全球购物

合作经营协议书范本

2014/04/17 职场文书

活动总结报告范文

2014/05/04 职场文书

企业安全生产规章制度

2015/08/06 职场文书

领导干部学习十八届五中全会精神心得体会

2016/01/05 职场文书

详解Redis集群搭建的三种方式

2021/05/31 Redis

Apache Pulsar集群搭建部署详细过程

2022/02/12 Servers

golang生成并解析JSON

2022/04/14 Golang