javascript css紅色經(jīng)典選項(xiàng)卡效果實(shí)現(xiàn)代碼
本文實(shí)例為大家分享了js選項(xiàng)卡效果的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
效果圖:
實(shí)現(xiàn)代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標(biāo)題文檔</title> <style type="text/css"> body{ font-size:12px;} .sec,.sec1{ cursor:pointer;} .sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;} .sec1{ color:#990000; text-align:center; background-color:#FFFFFF;} div{ line-height:22px;} </style> <script language="javascript"> function $(id){ return document.getElementById(id); } function xxk(num,id,ii,iii) { //alert(ii); var dq; for(var i=1;i<=num;i++) { if(i==id){ dq=$(ii+i).className='sec'; //當(dāng)前選項(xiàng) $(iii+i).style.display="block"; } else { dq=$(ii+i).className='sec1'; $(iii+i).style.display="none"; } } } </script> </head> <body> <table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> <tr> <td class="sec" id="t1" onmouseover="xxk(5,1,'t','tt')">選項(xiàng)卡1</td> <td bgcolor="#FFFFFF" id="t2" class="sec1" onmouseover="xxk(5,2,'t','tt')">選項(xiàng)卡2</td> <td bgcolor="#FFFFFF" id="t3" class="sec1" onmouseover="xxk(5,3,'t','tt')">選項(xiàng)卡3</td> <td bgcolor="#FFFFFF" id="t4" class="sec1" onmouseover="xxk(5,4,'t','tt')">選項(xiàng)卡4</td> <td bgcolor="#FFFFFF" id="t5" class="sec1" onmouseover="xxk(5,5,'t','tt')">選項(xiàng)卡5</td> </tr> <tr> <td colspan="5" bgcolor="#FFFFFF"> <div id="tt1">選項(xiàng)卡1月在上班</div> <div id="tt2" style="display:none;">選項(xiàng)卡2月在上班</div> <div id="tt3" style="display:none;">選項(xiàng)卡3月在上班</div> <div id="tt4" style="display:none;">選項(xiàng)卡4月在上班</div> <div id="tt5" style="display:none;">選項(xiàng)卡5月在上班</div> </td> </tr> </table> <br /> <table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> <tr> <td class="sec" id="ts1" onclick="xxk(4,1,'ts','tts')">選項(xiàng)卡1</td> <td bgcolor="#FFFFFF" id="ts2" class="sec1" onclick="xxk(4,2,'ts','tts')">選項(xiàng)卡2</td> <td bgcolor="#FFFFFF" id="ts3" class="sec1" onclick="xxk(4,3,'ts','tts')">選項(xiàng)卡3</td> <td bgcolor="#FFFFFF" id="ts4" class="sec1" onclick="xxk(4,4,'ts','tts')">選項(xiàng)卡4</td> </tr> <tr> <td colspan="4" bgcolor="#FFFFFF"> <div id="tts1">選項(xiàng)卡1月在上班</div> <div id="tts2" style="display:none;">選項(xiàng)卡2月在上班</div> <div id="tts3" style="display:none;">選項(xiàng)卡3月在上班</div> <div id="tts4" style="display:none;">選項(xiàng)卡4月在上班</div> </td> </tr> </table> </body> </html>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- 輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果
- 原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
- 很棒的js Tab選項(xiàng)卡切換效果
- 很實(shí)用的js選項(xiàng)卡切換效果
- 很棒的js選項(xiàng)卡切換效果
- 基于javascript實(shí)現(xiàn)最簡單的選項(xiàng)卡切換效果
- 基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記
- 簡單實(shí)現(xiàn)js選項(xiàng)卡切換效果
- 分步解析JavaScript實(shí)現(xiàn)tab選項(xiàng)卡自動(dòng)切換功能
- JavaScript仿網(wǎng)易選項(xiàng)卡制作代碼
相關(guān)文章
functional繼承模式 摘自javascript:the good parts
javascript:the good parts 書中Inheritance部分講到了一種functional的繼承方式, 具體這個(gè)functional該如何翻譯,就不是很清楚了, 就直接意會(huì)一下吧2011-06-06分享8個(gè)JavaScript庫可更好地處理本地存儲(chǔ)
這篇文章主要介紹了分享8個(gè)JavaScript庫可更好地處理本地存儲(chǔ),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10js 獲取頁面高度和寬度兼容 ie firefox chrome等
這篇文章主要介紹了js如何獲取頁面高度和寬度并且兼容ie firefox chrome等主流瀏覽器2014-05-05基于JavaScript實(shí)現(xiàn)樹形下拉框
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)樹形下拉框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁地震撕裂效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁地震撕裂效果代碼,引入第三方插件實(shí)現(xiàn)頁面的抖動(dòng)、撕裂及圖片等效果,需要的朋友可以參考下2015-10-10