js實(shí)現(xiàn)仿Windows風(fēng)格選項(xiàng)卡和按鈕效果實(shí)例
更新時(shí)間：2015年05月13日 09:41:22 作者：休閑生活文化
這篇文章主要介紹了js實(shí)現(xiàn)仿Windows風(fēng)格選項(xiàng)卡和按鈕效果的方法,可實(shí)現(xiàn)類似windows選項(xiàng)卡風(fēng)格的tab標(biāo)簽效果,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)仿Windows風(fēng)格選項(xiàng)卡和按鈕效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<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">設(shè)置</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="應(yīng)用(A)" name="_apply"
style="width: 60;height:22" disabled class="up">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
運(yùn)行效果如下：
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js實(shí)現(xiàn)的早期滑動(dòng)門菜單效果代碼
- JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果
- js實(shí)現(xiàn)的簡(jiǎn)潔網(wǎng)頁(yè)滑動(dòng)tab菜單效果代碼
- js實(shí)現(xiàn)鼠標(biāo)感應(yīng)向下滑動(dòng)隱藏菜單的方法
- JS自定義選項(xiàng)卡函數(shù)及用法實(shí)例分析
- js實(shí)現(xiàn)黑色簡(jiǎn)易的滑動(dòng)門網(wǎng)頁(yè)tab選項(xiàng)卡效果
- js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果
- js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼
- jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果
- js實(shí)現(xiàn)簡(jiǎn)潔的滑動(dòng)門菜單(選項(xiàng)卡)效果代碼
相關(guān)文章
js根據(jù)需要計(jì)算數(shù)組中重復(fù)出現(xiàn)某個(gè)元素的個(gè)數(shù)
今天小編就為大家分享一篇關(guān)于js根據(jù)需要計(jì)算數(shù)組中重復(fù)出現(xiàn)某個(gè)元素的個(gè)數(shù)，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
相對(duì)于ES5,ES6的對(duì)象字面量得到了很大程度的增強(qiáng)，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之對(duì)象字面量的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
淺談JavaScript對(duì)象的創(chuàng)建方式
下面小編就為大家?guī)硪黄獪\談JavaScript對(duì)象的創(chuàng)建方式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了原生JS實(shí)現(xiàn)音樂播放器的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
JS實(shí)現(xiàn)點(diǎn)擊鏈接切換顯示隱藏內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊鏈接切換顯示隱藏內(nèi)容的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Javascript高級(jí)技巧,需要的朋友可以參考下2014-02-02
10個(gè)在JavaScript開發(fā)中常遇到的BUG
給大家詳細(xì)著整理了在JavaScript開發(fā)中大家經(jīng)常遇到的BUG和問題，需要的朋友參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了JS模擬的Map類實(shí)現(xiàn)方法,可實(shí)現(xiàn)模擬java中map屬性按照鍵值對(duì)保存的功能,提供了采用數(shù)組和json兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了微信小程序整合使用富文本編輯器的方法,結(jié)合實(shí)例形式分析了微信小程序整合與使用富文本插件WxParse相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-04-04
substring是從中截取一段字符串,在組成一個(gè)新的字符串,這篇文章主要介紹了js中substring使用示例小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01