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

Asp.net下使用Jquery Ajax传送和接收DataTable的代码

Sep 12 Javascript

jQuery 验证插件 Web前端设计模式(asp.net)

Oct 17 Javascript

JavaScript 布尔操作符解析 && || ！

Aug 10 Javascript

如何将一个String和多个String值进行比较思路分析

Apr 22 Javascript

在Iframe中获取父窗口中表单的值(示例代码)

Nov 22 Javascript

jquery dialog open后,服务器端控件失效的快速解决方法

Dec 19 Javascript

JS判断字符串长度的5个方法（区分中文和英文）

Mar 18 Javascript

使用node.js 制作网站前台后台

Nov 13 Javascript

JavaScript中Function()函数的使用教程

Jun 04 Javascript

JavaScript的Date()方法使用详解

Jun 09 Javascript

解析JavaScript实现DDoS攻击原理与保护措施

Dec 26 Javascript

浅析Vue 防抖与节流的使用

Nov 14 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生成验证码，缩略图及水印图的类分享

2016/04/07 PHP

PHP 7.1新特性的汇总介绍

2016/12/16 PHP

thinkPHP5 tablib标签库自定义方法详解

2017/05/10 PHP

php使用curl_init()和curl_multi_init()多线程的速度比较详解

2018/08/15 PHP

实例讲解通过PHP创建数据库

2019/01/20 PHP

thinkphp框架使用JWTtoken的方法详解

2019/10/10 PHP

JavaScript 计算图片加载数量的代码

2011/01/01 Javascript

分享XmlHttpRequest调用Webservice的一点心得

2012/07/20 Javascript

jquery实现的可隐藏重现的靠边悬浮层实例代码

2013/05/27 Javascript

JS Jquery 遍历,筛选页面元素自动完成(实现代码)

2013/07/08 Javascript

原生JavaScript实现连连看游戏(附源码)

2013/11/05 Javascript

Angular.js与Bootstrap相结合实现表格分页代码

2016/04/12 Javascript

基于BootStrap实现局部刷新分页实例代码

2016/08/08 Javascript

Angular ng-repeat指令实例以及扩展部分

2016/12/26 Javascript

Javascript中JSON数据分组优化实践及JS操作JSON总结

2017/12/22 Javascript

Python struct.unpack

2008/09/06 Python

浅谈pandas中DataFrame关于显示值省略的解决方法

2018/04/08 Python

Python实现获取邮箱内容并解析的方法示例

2018/06/16 Python

python儿童学游戏编程知识点总结

2019/06/03 Python

Python从列表推导到zip()函数的5种技巧总结

2019/10/23 Python

如何在python中写hive脚本

2019/11/08 Python

解决python web项目意外关闭,但占用端口的问题

2019/12/17 Python

在python image 中实现安装中文字体

2020/05/16 Python

Python使用内置函数setattr设置对象的属性值

2020/10/16 Python

python基于Kivy写一个图形桌面时钟程序

2021/01/28 Python

奥地利汽车配件店：Pkwteile.at

2017/03/10 全球购物

英国二手iPhone、音乐、电影和游戏商店：musicMagpie

2018/10/26 全球购物

Under Armour安德玛意大利官网：美国高端运动科技品牌

2020/01/16 全球购物

保加利亚运动鞋购物网站：SneakerStudio.bg

2020/12/23 全球购物

《三袋麦子》教学反思

2014/03/02 职场文书

高中生的自我评价

2014/03/04 职场文书

奥利奥广告词

2014/03/20 职场文书

夫妻忠诚协议范文

2014/11/16 职场文书

2015年大学生暑期实习报告

2015/07/13 职场文书

python周期任务调度工具Schedule使用详解

2021/11/23 Python

CSS巧用渐变实现高级感背景光动画

2021/12/06 HTML / CSS