標籤：style blog http color java 使用 os io
隱藏與顯示
很多時候我們需要隱藏網頁的一些東西，或者說APP（比如phonegap用html5，js開發安卓應用，IOS應用）也一樣。
這裡我總結了幾種方式：
注意，這裡需要引入jquery的包，我給大家一個 http://down.51cto.com/data/1357745 。 記得在自己的網頁所在目錄下建立目錄jquery，把包放進去就好了。
1. 使用jquery的hide（）和show（）方法。 代碼如下,大家可以複製去試試。
使用hide（）隱藏，使用show（）顯示，當然，要先選中元素。<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });});</script></head><body><p id="p1">如果點擊“隱藏”按鈕，我就會消失。</p><button id="hide" type="button">隱藏</button><button id="show" type="button">顯示</button></body></html>
2. 淡入淡出型 fadein（） ----效果： 緩慢地變幻元素的css屬性，使其有動態效果。 這個也可以做出隱藏，顯示的功能。
jQuery fadeIn() 方法
jQuery fadeIn() 用於淡入已隱藏的元素。
文法：$(selector).fadeIn(speed,callback);
可選的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函數名稱。
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });});</script></head><body><p>示範帶有不同參數的 fadeIn() 方法。</p><button>點擊這裡，使三個矩形淡入</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>
3. 滑動隱藏與顯示。
jQuery slideToggle() 方法 .
jQuery 擁有以下滑動方法：
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
$(selector).slideToggle(speed,callback);
可選的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript"> $(document).ready(function(){$(".flip").click(function(){ $(".panel").slideToggle("slow"); });});</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body> <div class="panel"><p>W3School - 領先的 Web 技術教程網站</p><p>在 W3School，你可以找到你所需要的所有網站建設教程。</p></div> <p class="flip">請點擊這裡</p> </body></html>
4.使用css樣式：display：none 配合jquery的 show（）方式實現。
<!DOCTYPE html><html><head><script src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("#show").click(function(){ $("#hiddenDIV").show(); });});</script></head><body><div align="center"><div id="hiddenDIV" style="display:none; color:blue;"><font size="+5">這是隱藏的層！</font></div><button id="show" type="button">顯示隱藏的層</button></div></body></html>
4.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
