JS實(shí)現(xiàn)“隱藏與顯示”功能(多種方法)
下面我將效果圖展示出來(lái):
1,通過(guò)按鈕實(shí)現(xiàn)隱藏與顯示:
這個(gè)是通過(guò)按鈕點(diǎn)擊實(shí)現(xiàn)的隱藏與顯示,具體代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通過(guò)按鈕實(shí)現(xiàn)隱藏和顯示</title> <style type="text/css"> .body{ margin: 0 auto; } #show{ width: 600px; height: auto; font-size: 14px; background-color: #E4C392; display: block; padding: 10px; margin: 0 auto; border-radius: 10px; } #show h2{ color: #11C2EE; margin: 0 auto; } .slide{ margin: 0 auto; padding: 0; width: 600px; border-top: solid 4px #D6A55C; } .btn-slide{ background-color: bisque; width: 80px; height:30px; text-align: center; margin: 0 auto; border-radius: 8px; margin: 0 auto; display: block; } </style> <script type="text/javascript"> function divShow(){ document.getElementById("btnshow").style.display="block"; document.getElementById("btnhref").innerHTML ="關(guān)閉"; document.getElementById("btnhref").href ="javascript:divhidden()"; } function divhidden(){ document.getElementById("btnshow").style.display="none"; document.getElementById("btnhref").innerHTML ="了解"; document.getElementById("btnhref").href ="javascript:divShow()"; } </script> </head> <body> <div id="show"> <h2>通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)隱藏和顯示</h2> <hr /> <p> 歡迎來(lái)到我的博客Jaxzm! </p> <p> 目前我在學(xué)習(xí)GoF的設(shè)計(jì)模式,你想了解么?想要了解的話,請(qǐng)點(diǎn)擊按鈕。 </p> <div id="btnshow" style="display: none;"> <p> GoF所描述的23種設(shè)計(jì)模式,總共可以分為三種類型:創(chuàng)建型模式,行為型模式,結(jié)構(gòu)型模式。 </p> <p> 我覺(jué)得比較難的是創(chuàng)建型模式,因?yàn)樗f(shuō)的比較抽象,所以我不容易理解它,然后我編碼也比較少,所以就不太容易理解這個(gè)。 </p> </div> </div> <p class="slide"> <a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a> </p> </body> </html>
其中,主要能夠?qū)崿F(xiàn)這個(gè)功能的是js代碼,
通過(guò)getElementById()這個(gè)方法找到對(duì)應(yīng)元素,進(jìn)而控制它的style,以此來(lái)做對(duì)應(yīng)的功能。這是一個(gè)比較簡(jiǎn)單的方法。
接下來(lái)演示的是另外一種方式:
這個(gè)是通過(guò)具體的時(shí)間限制來(lái)控制其隱藏與顯示,
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通過(guò)定時(shí)實(shí)現(xiàn)隱藏和顯示</title> <style type="text/css"> .body{ margin: 0 auto; padding: 0; background-color: #D6A55C; } #show{ background-color: #E4C392; width: 700px; height: 100px; display: block; margin: 0 auto; padding: 10px; font-size: 14px; height: auto; text-align: center; } #show h2{ color: #3CC4A9; } .hid{ background: #E8E8E8; text-align: center; width: 700px; height: 100px; padding: 10px 10px 0 0; margin: 0 auto; display: block; text-decoration: none; } </style> <script type="text/javascript"> var h = 0; function addH(){ if(h < 400){ h=h+5; document.getElementById("show").style.height = h+"px"; } else{ return; } setTimeout("addH()",30); } window.onload = function showAds(){ addH(); setTimeout("subH()",5000); } function subH(){ if(h >0){ h -= 5; document.getElementById("show").style.height = h+"px"; } else{ document.getElementById("show").style.display = "none"; return; } setTimeout("subH()",30); } </script> </head> <body> <div id="show"> <h2>Jaxzm歡迎您的訪問(wèn)</h2> <span>此茶雖未飲,未聞,我心自生香.</span> </div> <div class="hid"> <h1>Jaxzm歡迎您的訪問(wèn)</h1> </div> </div> </body> </html>
注意在這個(gè)js里面的setTimeout()函數(shù),setTimeout(function,time).更加精準(zhǔn)地用法:
執(zhí)行一段代碼:
var i=0; setTimeout("i+=1;alert(i)",1000);
執(zhí)行一個(gè)函數(shù):
var i=0; setTimeout(function(){i+=1;alert(i);},1000);
還有一種方式就是通過(guò)jQuery方法來(lái)實(shí)現(xiàn),通過(guò)切換實(shí)現(xiàn)隱藏與顯示;效果如下:
看到它的樣子,是否會(huì)覺(jué)得和第一個(gè)很像,但是也會(huì)發(fā)現(xiàn)它和第一個(gè)是不一樣的,具體代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通過(guò)jQuery實(shí)現(xiàn)展開(kāi)收縮</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> .body{ margin: 0 auto; } #show{ width: 600px; height: auto; font-size: 14px; background-color: #E4C392; display: block; padding: 10px; margin: 0 auto; border-radius: 10px; } #show h2{ color: #11C2EE; margin: 0 auto; } .slide{ margin: 0 auto; padding: 0; width: 600px; border-top: solid 4px #D6A55C; } .btn-slide{ background-color: bisque; width: 80px; height:30px; text-align: center; margin: 0 auto; border-radius: 8px; margin: 0 auto; display: block; } </style> <script type="text/javascript"> $(document).ready(function () { $(".btn-slide").click(function () { $("#btnshow").slideToggle(); }); }); </script> </head> <body> <div id="show"> <h2>通過(guò)jQuery代碼實(shí)現(xiàn)隱藏和顯示</h2> <hr /> <p> 歡迎來(lái)到我的博客Jaxzm! </p> <p> 目前我在學(xué)習(xí)GoF的設(shè)計(jì)模式,你想了解么?想要了解的話,請(qǐng)點(diǎn)擊按鈕。 </p> <div id="btnshow" style="display: none;"> <p> GoF所描述的23種設(shè)計(jì)模式,總共可以分為三種類型:創(chuàng)建型模式,行為型模式,結(jié)構(gòu)型模式。 </p> <p> 我覺(jué)得比較難的是創(chuàng)建型模式,因?yàn)樗f(shuō)的比較抽象,所以我不容易理解它,然后我編碼也比較少,所以就不太容易理解這個(gè)。 </p> </div> </div> <p class="slide"> <a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a> </p> </body> </html>
這段代碼和第一個(gè)唯一不同的便是這個(gè)js代碼:
這里首先要引入jQuery庫(kù),然后才能調(diào)用jquery庫(kù)里面的方法slideToggle(),方法的具體實(shí)現(xiàn)如下:
當(dāng)點(diǎn)擊了按鈕,它就會(huì)將顯示與隱藏進(jìn)行切換。
學(xué)習(xí)了以上知識(shí)之后,就可以實(shí)現(xiàn)博客的頁(yè)面顯示。但是這里還需要了解nextSibling和previousSiling這兩個(gè)屬性。
nextSibling 它是返回某一元素后面緊跟的元素。previousSibling 它是返回某一元素之前緊跟的元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠標(biāo)控制動(dòng)畫展開(kāi)</title> <style type="text/css"> body { margin: 0 auto; padding: 0; font-size: 9pt; line-height: 180%; } #pn { background: #f8f8f8; height: auto; width: 750px; display: block; margin: 0 auto; padding: 5px; } .btn { width: 80px; height: 20px; padding: 5px 3px 5px 3px; text-align: center; text-decoration: none; background: #f0f0f0; border: 1px solid #CCC; } .content { border: 1px solid #CCC; display: none; padding: 5px; } .title { font-weight: bold; color: #3030FF; font-size:11pt; } .subtitle { color: #CCC; } .btm { text-align: right; height: 30px; } </style> <script type="text/javascript"> var time = 300; var h = 40; function showdiv(obj) { //obj.parentNode.nextSibling.nextSibling.style.display = "block"; var x = obj.parentNode.nextSibling; //包含眾多空格作為文本節(jié)點(diǎn),因此在我們使用nextSibling和previousSibling時(shí)就會(huì)出現(xiàn)問(wèn)題。 //因?yàn)镕ireFox會(huì)把文本節(jié)點(diǎn)誤當(dāng)做元素節(jié)點(diǎn)的兄弟節(jié)點(diǎn)來(lái)處理。我們可以添加nodeType來(lái)判斷。 //當(dāng)上一節(jié)點(diǎn)或者是下一節(jié)點(diǎn)為文本節(jié)點(diǎn)時(shí),就繼續(xù)尋找,直到找到下一個(gè)元素節(jié)點(diǎn)。 // 其中nodeType的值主要有以下幾種: // // 元素節(jié)點(diǎn)的nodeType值為1 // 屬性節(jié)點(diǎn)的nodeType值為2 // 文本節(jié)點(diǎn)的nodeType值為3 if (x.nodeType != 1) { x = x.nextSibling; } x.style.display = "block"; obj.parentNode.style.display = "none"; } function hidediv(obj) { obj.parentNode.parentNode.style.display = "none"; var x = obj.parentNode.parentNode.previousSibling; if (x.nodeType != 1) { x = x.previousSibling; } x.style.display = "block"; } </script> </head> <body> <div id="pn"> <div> <p class="title"> 原生js實(shí)現(xiàn)tooltip提示框的效果</p> <p class="subtitle"> 2016年11月13日 </p> <p> 摘要: 在js的世界里面,每一個(gè)小的特效都那么微不足道,卻又那么的令人向往與好奇。 前端工程師的任務(wù)特別高大上,因?yàn)樗麄兊囊粋€(gè)小小的設(shè)計(jì)就會(huì)激發(fā)別人的求知欲。 比如說(shuō)我,只是隨機(jī)一瞟,便看到了這個(gè)tooltip的特效,就有一種想要征服它的愿望。 比如這個(gè)tooltip的效果展示: 這個(gè)便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a> </p> <div class="content"> <p>摘要: 在js的世界里面,每一個(gè)小的特效都那么微不足道,卻又那么的令人向往與好奇。 前端工程師的任務(wù)特別高大上,因?yàn)樗麄兊囊粋€(gè)小小的設(shè)計(jì)就會(huì)激發(fā)別人的求知欲。 比如說(shuō)我,只是隨機(jī)一瞟,便看到了這個(gè)tooltip的特效,就有一種想要征服它的愿望。 比如這個(gè)tooltip的效果展示: 這個(gè)便是tooltip提示框的效果。</p> <p>工具提示(Tooltip)插件根據(jù)需求生成內(nèi)容和標(biāo)記,默認(rèn)情況下是把工具提示(tooltip)放在它們的觸發(fā)元素后面。 您可以有以下兩種方式添加工具提示(tooltip): <p>通過(guò) data 屬性:如需添加一個(gè)工具提示(tooltip),只需向一個(gè)錨標(biāo)簽添加 data-toggle="tooltip" 即可。 錨的 title 即為工具提示(tooltip)的文本。</p> 默認(rèn)情況下,插件把工具提示(tooltip)設(shè)置在頂部。 </p> <div class="btm"> <a href="#" class="btn" onclick="hidediv(this);">收起全文</a> </div> </div> <hr /> <div> <p class="title"> 原生js實(shí)現(xiàn)tooltip提示框的效果</p> <p class="subtitle"> 2016年11月13日 </p> <p> 摘要: 在js的世界里面,每一個(gè)小的特效都那么微不足道,卻又那么的令人向往與好奇。 前端工程師的任務(wù)特別高大上,因?yàn)樗麄兊囊粋€(gè)小小的設(shè)計(jì)就會(huì)激發(fā)別人的求知欲。 比如說(shuō)我,只是隨機(jī)一瞟,便看到了這個(gè)tooltip的特效,就有一種想要征服它的愿望。 比如這個(gè)tooltip的效果展示: 這個(gè)便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a> </p> <div class="content"> <p>摘要: 在js的世界里面,每一個(gè)小的特效都那么微不足道,卻又那么的令人向往與好奇。 前端工程師的任務(wù)特別高大上,因?yàn)樗麄兊囊粋€(gè)小小的設(shè)計(jì)就會(huì)激發(fā)別人的求知欲。 比如說(shuō)我,只是隨機(jī)一瞟,便看到了這個(gè)tooltip的特效,就有一種想要征服它的愿望。 比如這個(gè)tooltip的效果展示: 這個(gè)便是tooltip提示框的效果。</p> <p>工具提示(Tooltip)插件根據(jù)需求生成內(nèi)容和標(biāo)記,默認(rèn)情況下是把工具提示(tooltip)放在它們的觸發(fā)元素后面。 您可以有以下兩種方式添加工具提示(tooltip): <p>通過(guò) data 屬性:如需添加一個(gè)工具提示(tooltip),只需向一個(gè)錨標(biāo)簽添加 data-toggle="tooltip" 即可。 錨的 title 即為工具提示(tooltip)的文本。</p> 默認(rèn)情況下,插件把工具提示(tooltip)設(shè)置在頂部。 </p> <div class="btm"> <a href="#" class="btn" onclick="hidediv(this);">收起全文</a> </div> </div> </div> </body> </html>
效果如下:
其實(shí)以上方法具體實(shí)現(xiàn)起來(lái)都是比較簡(jiǎn)單的。實(shí)用性也比較大。
以上所述是小編給大家介紹的JS實(shí)現(xiàn)“隱藏與顯示”功能的多種方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS中實(shí)現(xiàn)隱藏部分姓名或者電話號(hào)碼的代碼
- JS中input表單隱藏域及其使用方法
- javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果
- AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例
- JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊展開(kāi)或隱藏表格行的方法
- jquery和js實(shí)現(xiàn)對(duì)div的隱藏和顯示方法
- js設(shè)置控件的隱藏與顯示的兩種方法
- js判斷元素是否隱藏的方法
- javascript獲取隱藏元素(display:none)的高度和寬度的方法
- JS隱藏號(hào)碼中間4位代碼實(shí)例
相關(guān)文章
深入理解基于vue-cli的webpack打包優(yōu)化實(shí)踐及探索
這篇文章主要介紹了基于vue-cli的webpack打包優(yōu)化實(shí)踐及探索,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10基于JavaScript實(shí)現(xiàn)淘寶商品廣告效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)淘寶商品廣告效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Bootstrap標(biāo)簽頁(yè)(Tab)插件使用方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap標(biāo)簽頁(yè)(Tab)插件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03利用404錯(cuò)誤頁(yè)面實(shí)現(xiàn)UrlRewrite的實(shí)現(xiàn)代碼
要求:網(wǎng)站編碼為utf-8,不適用于GB2312; 替換字符的正則可以自己增加和修改,以適合自己的網(wǎng)站;2008-08-08javascript簡(jiǎn)單實(shí)現(xiàn)深淺拷貝過(guò)程詳解
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)深淺拷貝過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10利用momentJs做一個(gè)倒計(jì)時(shí)組件(實(shí)例代碼)
這篇文章主要介紹了利用momentJs做一個(gè)倒計(jì)時(shí)組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12javascript HTMLEncode HTMLDecode的完整實(shí)例(兼容ie和火狐)
用的瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)轉(zhuǎn)換,方法是動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素2009-06-06javascript跨域請(qǐng)求包裝函數(shù)與用法示例
這篇文章主要介紹了javascript跨域請(qǐng)求包裝函數(shù)與用法,結(jié)合實(shí)例形式分析了javascript基于ajax的跨域請(qǐng)求封裝函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2016-11-11