JS實(shí)現(xiàn)的最簡Table選項(xiàng)卡效果
更新時(shí)間：2015年10月14日 10:19:52 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)的最簡Table選項(xiàng)卡效果,涉及簡單的JavaScript響應(yīng)鼠標(biāo)事件切換樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的最簡Table選項(xiàng)卡效果。分享給大家供大家參考。具體如下：
這是一款最簡易的Table選項(xiàng)卡，是基于Table表格的，非DIV結(jié)構(gòu)，習(xí)慣表格的朋友可能會喜歡本選項(xiàng)卡，部分修飾仍然用的是Table，比如表格邊框、背景顏色等，個人感覺好像用Table比用DIV結(jié)構(gòu)代碼更精簡一些。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu-codes/
具體代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>選項(xiàng)卡</title>
<style type="text/css">
<!--
.menu1 {
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
background-color: skyblue;
cursor:hand;
}
.menu2 {
font-size: 14px;
color: #990000;
text-decoration: none;
background-color: #FFFFFF;
cursor:hand;
}-->
</style>
<script language="JavaScript">
function tabit(id,cid) {
tab1.className="menu2";
tab2.className="menu2";
id.className="menu1";
ctab1.style.display="none";
ctab2.style.display="none";
cid.style.display="block";
}
</script>
</head>
<body onload="tabit(tab1,ctab1)">
<table width="400" height="169" border="0" cellpadding="3" cellspacing="1" bgcolor="#990000">
<tr>
<td height="20" class="menu1" id="tab1" onmouseover="tabit(tab1,ctab1)">今日焦點(diǎn)</td>
<td height="20" class="menu2" id="tab2" onmouseover="tabit(tab2,ctab2)">一周熱門</td>
</tr>
<tr id="ctab1" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">今日焦點(diǎn)的內(nèi)容</td>
</tr>
<tr id="ctab2" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">一周熱門的內(nèi)容</td>
</tr>
</table>
</body>
</html>
希望本文所述對大家的JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS使用面向?qū)ο蠹夹g(shù)實(shí)現(xiàn)的tab選項(xiàng)卡效果示例
- js基于面向?qū)ο髮?shí)現(xiàn)網(wǎng)頁TAB選項(xiàng)卡菜單效果代碼
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼
- 原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
- 4種JavaScript實(shí)現(xiàn)簡單tab選項(xiàng)卡切換的方法
- js簡單實(shí)現(xiàn)豎向tab選項(xiàng)卡的方法
- JS實(shí)現(xiàn)滑動菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
- JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果
- JS+CSS實(shí)現(xiàn)的經(jīng)典tab選項(xiàng)卡效果代碼
- JS面向?qū)ο缶幊虒?shí)現(xiàn)的Tab選項(xiàng)卡案例詳解
相關(guān)文章
js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡易點(diǎn)擊切換顯示或隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了為什么JavaScript沒有塊級作用域的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript實(shí)現(xiàn)電商平臺商品細(xì)節(jié)圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電商平臺商品細(xì)節(jié)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了通過js來判斷iframe里的頁面是否加載完成,需要的朋友可以參考下2014-06-06
JavaScript獲取鼠標(biāo)移動時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
這篇文章主要介紹了JavaScript獲取鼠標(biāo)移動時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox瀏覽器),需要的朋友可以參考下2014-09-09
這篇文章主要介紹了js對象基礎(chǔ),以實(shí)例形式分析了js對象的創(chuàng)建、讀取及遍歷等技巧,需要的朋友可以參考下2015-01-01
JavaScript 編程引入命名空間的方法與代碼...2007-08-08
這篇文章主要給大家介紹了關(guān)于async/await地獄該如何避免的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-05-05
uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個原因及解決
這篇文章主要給大家介紹了關(guān)于uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個原因及正確解決辦法,文中還介紹了uni-app設(shè)置頁面導(dǎo)航條顏色的實(shí)例代碼,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了js實(shí)現(xiàn)整體縮放頁面適配移動端，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03