常見問題1:默認div隱藏,點擊按鈕時出現,再點擊時隱藏。


例:默認div隱藏,點擊按鈕時出現,再點擊時隱藏。

<a href="#" onclick="f('ycbc')"; >控制按鈕</a> 
<div id="ycbc" style="display:none">隱藏的內容</div>

解決方法一:javascript

利用onclick事件調用f('ycbc')函數,參數為隱藏的內容div的id,在函數加入鈕時出現,再點擊時隱藏代碼,如下:

function f(a){
		var obj = document.getElementById(a);
		if(obj.style.display==""){
		obj.style.display = "none";   
		}else{
            obj.style.display = ""; } }

注意:隱藏的內容div要加style="display:none"


 a標簽的KENG——a標簽的href="#" 一定要加#,否則,點擊后想當於刷新本頁。加入的效果出不來。


 解決方法二:jquery

<script src="../js/jquery.min.js"></script>

注意:使用jquery記得要引入jquery.js

<a href="#" " id="butonclick">點擊按鈕</a>
<div  id="ycxg" style="display: none;">隱藏的內容</div>

原理:查找id#butonclick調用onclick事件,判斷隱藏的內容的id="ycxg"的CSS樣式,當display=none,隱藏的內容的id="ycxg"的CSS樣式display=block,否則display=none;

$(document).ready(function() {
		$('#butonclick').click(function(){
			if($("#ycxg").css('display')=='none'){
				$("#ycxg").css("display","block");
			}else{
				$("#ycxg").css("display","none");
			}
		})
	});

或使用jquery顯示隱藏效果

$(document).ready(function() {
		$('#butonclick').click(function(){
		$("#ycxg").toggle();
	})
	});

擴展:

$("#hide").click(function(){
  $("p").hide();   //隱藏
});

$("#show").click(function(){
  $("p").show();   //顯示
});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM