问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。

Posted 不见花落

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了问题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();   //显示
});

以上是关于问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。的主要内容,如果未能解决你的问题,请参考以下文章

jquery显示隐藏div

在点击时出现一个div,jquery

VUE JS - 默认情况下如何隐藏 div?如果用户点击按钮,那么它应该使用 vue 显示

JS点击按钮显示隐藏层问题

jquery如何实现点击一个按钮 div框从右→左,再点击按钮 div框从刚刚的位置移动回原来的位置?

用点击显示/隐藏 UIToolbar