例:默認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(); //顯示
});
