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

js 获取服务器控件值的代码

Mar 05 Javascript

JavaScript接口实现代码（Interfaces In JavaScript）

Jun 11 Javascript

js实现文章文字大小字号功能完整实例

Nov 01 Javascript

JS打开新窗口防止被浏览器阻止的方法

Jan 03 Javascript

jQuery实现企业网站横幅焦点图切换功能实例

Apr 30 Javascript

基于Jquery插件实现跨域异步上传文件功能

Apr 26 Javascript

通过cordova将vue项目打包为webapp的方法

Feb 02 Javascript

Vue3项目打包后部署到服务器请求不到后台接口解决方法

Feb 06 Javascript

浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用

Mar 08 Javascript

vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

Apr 28 Javascript

js判断鼠标移入移出方向的方法

Jun 24 Javascript

vue中的.$mount('#app')手动挂载操作

Sep 02 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 页面执行时间计算代码

2008/12/04 PHP

PHP 引用文件技巧

2010/03/02 PHP

PHP学习之数组值的操作

2011/04/17 PHP

如何使用纯PHP实现定时器任务（Timer）

2015/07/31 PHP

Zend Framework入门教程之Zend_Mail用法示例

2016/12/08 PHP

PHP获取日期对应星期、一周日期、星期开始与结束日期的方法

2018/06/22 PHP

Javascript获取CSS伪元素属性的实现代码

2014/09/28 Javascript

基于Bootstrap实现Material Design风格表单插件附源码下载

2016/04/18 Javascript

有关easyui-layout中的收缩层无法显示标题的解决办法

2016/05/10 Javascript

Javascript之面向对象--封装

2016/12/02 Javascript

AngularJS前端页面操作之用户修改密码功能示例

2017/03/27 Javascript

javaScript 连接打印机,打印小票的实例

2017/12/29 Javascript

nodejs中密码加密处理操作详解

2018/03/20 NodeJs

JavaScript实现异步图像上传功能

2018/07/12 Javascript

Javascript读写cookie的实例源码

2019/03/16 Javascript

jquery获取input输入框中的值

2019/11/13 jQuery

JS实现动态无缝轮播

2020/01/11 Javascript

从0搭建vue-cli4脚手架

2020/06/17 Javascript

[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16

2018/08/17 DOTA

Python实现查找系统盘中需要找的字符

2015/07/14 Python

python中redis的安装和使用

2016/12/04 Python

python TKinter获取文本框内容的方法

2018/10/11 Python

Python 使用元类type创建类对象常见应用详解

2019/10/17 Python

python 爬虫网页登陆的简单实现

2020/11/30 Python

美国最受欢迎的童装品牌之一：The Children’s Place

2016/07/23 全球购物

波兰多品牌运动商店：StreetStyle24.pl

2020/09/22 全球购物

什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议

2012/09/06 面试题

中文系师范生自荐信

2013/10/01 职场文书

应届生求职信写作技巧

2013/10/24 职场文书

表演方阵解说词

2014/02/08 职场文书

社区母亲节活动记录

2014/03/06 职场文书

安全生产大检查方案

2014/05/07 职场文书

社区维稳工作方案

2014/06/06 职场文书

紧急通知

2015/04/17 职场文书

中国合伙人观后感

2015/06/02 职场文书

大学生实习证明

2015/06/16 职场文书