zoukankan      html  css  js  c++  java
  • 常见问题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();   //显示
    });
  • 相关阅读:
    [LUOGU] 1364 医院设置
    [POJ] 3278 Catch That Cow
    [OpenJudge] 2727 仙岛寻药
    [POJ] 2386 Lake Counting
    [POJ]1118 Lining up
    [LUOGU]1141 01迷宫
    [POJ]1111 Image Perimeters
    python之路——初识函数
    python----------文件操作
    Python中的split()函数的用法
  • 原文地址:https://www.cnblogs.com/wuss/p/7879613.html
Copyright © 2011-2022 走看看