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

兼容ie、firefox的图片自动缩放的css跟js代码分享

Jan 21 Javascript

JavaScript禁止页面操作的示例代码

Dec 17 Javascript

获取select元素被选中的文本内容的js代码

Jan 29 Javascript

基于jQuery实现多层次的手风琴效果附源码

Sep 21 Javascript

JS实现消息来时让网页标题闪动效果的方法

Apr 20 Javascript

解决ajax不能访问本地文件问题（利用js跨域原理）

Jan 24 Javascript

ES6新特性之Symbol类型用法分析

Mar 31 Javascript

Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）

Jun 04 Javascript

简单谈谈原生js的math对象

Jun 27 Javascript

axios 处理 302 状态码的解决方法

Apr 10 Javascript

解决ele ui 表格表头太长问题的实现

Nov 13 Javascript

javascript 设计模式之组合模式原理与应用详解

Apr 08 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 获取远程网页内容的函数

2009/09/08 PHP

跟我学Laravel之请求与输入

2014/10/15 PHP

wamp服务器访问php非常缓慢的解决过程

2015/07/01 PHP

PHP文件上传之多文件上传的实现思路

2016/01/27 PHP

ThinkPHP框架实现数据增删改

2017/05/07 PHP

Laravel程序架构设计思路之使用动作类

2018/06/07 PHP

Javascript 生成指定范围数值随机数

2009/01/09 Javascript

javascript Firefox与IE 替换节点的方法

2010/02/24 Javascript

jQuery autocomplate 自扩展插件、自动完成示例代码

2011/03/28 Javascript

js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码

2011/07/27 Javascript

jquery实现图片翻页效果

2013/12/23 Javascript

jquery插件开发之实现google+圈子选择功能

2014/03/10 Javascript

js判断登录与否并确定跳转页面的方法

2015/01/30 Javascript

实例讲解jQuery中对事件的命名空间的运用

2016/05/24 Javascript

jQuery插件passwordStrength密码强度指标详解

2016/06/24 Javascript

JSONP和批量操作功能的实现方法

2016/08/21 Javascript

JS获取鼠标相对位置的方法

2016/09/20 Javascript

javascript 内置对象及常见API详细介绍

2016/11/01 Javascript

Node.js连接postgreSQL并进行数据操作

2016/12/18 Javascript

jQuery层级选择器实例代码

2017/02/06 Javascript

JS实现商城秒杀倒计时功能(动态设置秒杀时间)

2019/12/12 Javascript

Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

2020/05/18 Javascript

解决Vue + Echarts 使用markLine标线(precision精度问题)

2020/07/20 Javascript

原生JS实现拖拽功能

2020/12/16 Javascript

举例讲解Python中的死锁、可重入锁和互斥锁

2015/11/05 Python

通过python改变图片特定区域的颜色详解

2019/07/15 Python

python实现图片上添加图片

2019/11/26 Python

Python函数递归调用实现原理实例解析

2020/08/11 Python

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

2013/01/31 HTML / CSS

HTC VIVE美国官网：VR虚拟现实眼镜

2018/02/13 全球购物

初中毕业生的自我评价

2014/03/03 职场文书

如何写求职信

2014/05/24 职场文书

2014教师党员自我评议（5篇）

2014/09/20 职场文书

通知函的格式

2015/04/27 职场文书

JS实现简单控制视频播放倍速的实例代码

2021/04/18 Javascript

Python Pandas常用函数方法总结

2021/06/15 Python