Home > Article > Web Front-end > js implementation of Windows-style tab and button effects_javascript skills
js implementation of Windows-style tab and button effects_javascript skills
- WBOYOriginal
- 2016-05-16 15:59:201008browse
The example in this article describes how to use js to achieve Windows-style tab and button effects. Share it with everyone for your reference. The specific implementation method is as follows:
<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 >
<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>
The operation effect is as follows:
I hope this article will be helpful to everyone’s JavaScript programming design.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS implements simple and fully compatible drag layer example_javascript skillsNext article：JS implements simple and fully compatible drag layer example_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills