例:默认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隐藏,点击按钮时出现,再点击时隐藏。的更多相关文章

  1. jquery点击添加样式,再点击取出样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. radio点击一下选中,再点击恢复未选状态

    radio点击一下选中,再点击恢复未选状态 实现方式1: <input   type="radio"   id="cat"   name="ca ...

  3. js计时器,点击开始计时,再点击停止

    点击倒计时开始,点击停止,再次点击又开始,再点停止... <i id=</i>秒 <em onclick="timeOpen();">开始</e ...

  4. Android:GridView中实现点击Item变色,再点击还原。

    使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...

  5. 原声js,取消事件冒泡,点击按钮,显示box,点击屏幕其他地方,box隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js 点击图片放大,再点击缩小还原

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个

    效果: <div class="relFacilityTitcon"> <i v-for="(item,index) in facilityList&q ...

  8. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  9. js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

随机推荐

  1. flink的Standalone集群安装

    1:上传安装包到linux系统 使用rz命令 2:解压 tar –zxvf flink-1.5.0-bin-hadoop24-scala_2.11.tgz 3:修改配置文件 vim conf/flin ...

  2. window下php5.5安装redis扩展

    redis是现在比较流行的noSQL,主流大型网站都用的比较多,很多同学不知道怎么安装,这里介绍在windows下面安装以及扩展,提供学习使用,实际使用环境多在Linux下. 1.phpinfo(), ...

  3. UOJ#191. 【集训队互测2016】Unknown 点分治 分治 整体二分 凸包 计算几何

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ191.html 题目传送门 - UOJ191 题意 自行移步集训队论文2016中罗哲正的论文. 题解 自行 ...

  4. ajax 的一些参数

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  5. TF:TF定义两个变量相乘之placeholder先hold类似变量+feed_dict最后外界传入值—Jason niu

    #TF:TF定义两个变量相乘之placeholder先hold类似变量+feed_dict最后外界传入值 import tensorflow as tf input1 = tf.placeholder ...

  6. Spring boot中自定义Json参数解析器

    转载请注明出处... 一.介绍 用过springMVC/spring boot的都清楚,在controller层接受参数,常用的都是两种接受方式,如下 /** * 请求路径 http://127.0. ...

  7. XamarinAndroid组件教程设置自定义子元素动画(一)

    XamarinAndroid组件教程设置自定义子元素动画(一) 如果在RecyclerViewAnimators.Animators中没有所需要的动画效果,就可以自定义一个.此时,需要让自定义的动画继 ...

  8. Yolov3实战 基于darknet window版

    特此声明:训练过程预先认为你对yolov3神经网络有一定了解的基础上进行. 目录 一.先备齐下面的工具(预先善其事,必先利其器) 二.接下里使用我们的工具编译我们的环境 三. 训练自己的数据集 1.  ...

  9. JAVA中final修饰符小结

    一.final关键字可以用来修饰类.方法.变量.各有不同. A.修饰类(class).      1.该类不能被继承.      2.类中的方法不会被覆盖,因此默认都是final的.      3.用 ...

  10. Topcoder的使用方法

    http://acmicpc.info/archives/164?tdsourcetag=s_pctim_aiomsg(大家都推荐的一个指南, 但我觉得不好用) https://www.jianshu ...