快捷導(dǎo)航

點(diǎn)擊隱藏頁面左欄或右欄實(shí)現(xiàn)js代碼

更新時(shí)間：2013年04月01日 16:03:48 作者：

通過點(diǎn)擊來隱藏頁面左欄或右欄，此效果在實(shí)際應(yīng)用中很常見，接下來為大家詳細(xì)介紹下實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望可以幫助到你

點(diǎn)擊隱藏頁面左欄或右欄(同一TABLE中)

 
<style type="text/css"> 
<!-- 
.navPoint &#123;COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt&#125; 
.STYLE1 &#123;FONT-FAMILY: Webdings; FONT-SIZE: 9pt; cursor: hand;&#125; 
--> 
</style> 
<script> 
function switchSysBar(){ 
if (switchPoint.innerText==3){ 
switchPoint.innerText=4 
document.all("frmTitle").style.display="none" 
}else{ 
switchPoint.innerText=3 
document.all("frmTitle").style.display="" 
}} 
</script> 
<table border="0" cellPadding="0" cellSpacing="0" height="100%" width="100%"> 
<tr> 
<td width="20%" align="middle" vAlign="center" noWrap bgcolor="#CC99FF" id="frmTitle" name="frmTitle"> </td> 
<td class=a2 style="WIDTH: 9pt"><table border="0" cellPadding="0" cellSpacing="0" height="100%"> 
<tr> 
<td style="HEIGHT: 100%" onClick="switchSysBar()"><font style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff"> <br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<font color="#FF0000"><br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<span class="STYLE1" id="switchPoint" title="關(guān)閉/打開左欄">3</span><br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
</font><br/> 
<br/> 
屏幕切換 </font></td> 
</tr> 
</table></td> 
<td bgcolor="#FFCC99" style="WIDTH: 100%"> </td> 
</tr> 
</table> 
想把隱藏左右欄的那個(gè)按鈕按成圖片，改一下JS，IMG增加ID，這里id=aa，也可以換成其它的名稱，參考如下： 
<script> 
function switchSysBar(){ 
if (document.all.aa.src.indexOf("bl_1")!=-1){ 
aa.src="images/al_1.gif" 
document.all("frmTitle").style.display="none" 
}else{ 
aa.src="images/bl_1.gif" 
document.all("frmTitle").style.display="" 
} 
} 
</script> 
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="770" valign="top">&nbsp;</td> 
<td width="10" onClick="switchSysBar()"><img id="aa" src="images/bl_1.gif" title="關(guān)閉/打開功能導(dǎo)航"></td> 
<td width="191" valign="top" id="frmTitle" name="frmTitle">&nbsp;</td> 
</tr> 
</table> 

您可能感興趣的文章:

[js+css]點(diǎn)擊隱藏層,點(diǎn)擊另外層不能隱藏原層

相關(guān)文章

js文本框輸入點(diǎn)回車觸發(fā)確定兼容IE、FF等
js文本框輸入點(diǎn)回車觸發(fā)確定兼容IE、FF等，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-11-11
JavaScript模擬實(shí)現(xiàn)新浪下拉菜單效果
這篇文章主要為大家介紹了如何通過JavaScript模擬實(shí)現(xiàn)新浪的下拉菜單效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試
2022-03-03
網(wǎng)頁開發(fā)中的容易忽略的問題 javascript HTML中的table
最近在搞在線電子表格這個(gè)東西,下面的是使用中的一些知識(shí)技巧。
2009-04-04
詳解layui?laydate選擇時(shí)間的回調(diào)方法
這篇文章主要介紹了layui?laydate選擇時(shí)間的回調(diào)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
JavaScript中ahooks?處理?DOM?的方法
這篇文章主要介紹了JavaScript中ahooks處理DOM的方法，主要通過ahooks對(duì)DOM類Hooks使用規(guī)范，以及源碼中是如何去做處理的，具體詳細(xì)介紹需要的小伙伴可以參考一下下面文章內(nèi)容
2022-06-06
js動(dòng)態(tài)修改表格行colspan列跨度的方法
這篇文章主要介紹了js動(dòng)態(tài)修改表格行colspan列跨度的方法,實(shí)例分析了javascript動(dòng)態(tài)修改html中table屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實(shí)例形式分析了ES6函數(shù)對(duì)象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下
2019-04-04
JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼
這篇文章主要介紹了JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼,涉及JavaScript頁面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
微信小程序在{{ }}中直接使用函數(shù)的方法示例
最近在學(xué)習(xí)微信小程序,在學(xué)習(xí)中遇到了一些問題,所以進(jìn)行了總結(jié)了下,這篇文章主要給大家介紹了關(guān)于微信小程序在{{ }}中直接使用函數(shù)的相關(guān)資料,需要的朋友可以參考下
2021-06-06
element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài)的示例代碼
這篇文章主要介紹了element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài),代碼部分分為dom部分和data部分及css部分,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12