例:默认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. 查询Linux系统中glibc的版本

    编写一个简单的程序 #include <stdio.h> int main() { printf("Hello world\n"); ; } 编译 gcc test.c ...

  2. Eclipse+Maven整合开发Java项目(二)➣webapp3.0以上的Maven项目

    概述 Eclipse集成Maven插件,新建maven-archetype-webapp项目的时候,采用的webapp的版本较低,默认是2.3,有些时候,我们希望升级Webapp的版本到3.0(Tom ...

  3. win7自带截屏便签 打开命令

    win7自带截屏 1.win+r 2.SnippingTool.exe    打开 便签 1.win+r 2.StikyNot.exe    打开 查本机ip 1.win+r 2.cmd 3.ipco ...

  4. nginx安装,运行(ubuntu)

    文本只涉及单节点nginx 安装gcc g++依赖库 apt-get install build-essential apt-get install libtool 安装pcre依赖库 apt-get ...

  5. 20165235 2018-3 《Java程序设计》第5周学习总结

    20165235 2018-3 <Java程序设计>第5周学习总结 教材学习内容总结 第六章 内部类与异常类 (一)内部类:1.java支持在一个类中定义另一个类,这个类叫内部类.2.内部 ...

  6. JavaEE-Servlet的部署和配置

    1.:配置好相应环境和检查tomcat8.5能否运行,详见https://www.cnblogs.com/LJHAHA/p/10461697.html 2.将tomcat8.5下的webapps目录中 ...

  7. POJ 3169 Layout 【差分约束】+【spfa】

    <题目链接> 题目大意: 一些母牛按序号排成一条直线.有两种要求,A和B距离不得超过X,还有一种是C和D距离不得少于Y,问可能的最大距离.如果没有最大距离输出-1,如果1.n之间距离任意就 ...

  8. POJ 1988 Cube Stacking 【带权并查集】

    <题目链接> 题目大意: 有几个stack,初始里面有一个cube.支持两种操作: 1.move x y: 将x所在的stack移动到y所在stack的顶部. 2.count x:数在x所 ...

  9. numpy 用于图像处理

    1. 转换为灰度图 灰度图的数据可以看成是二维数组,元素取值为0 ~ 255,其中,0为黑色,255为白色.从0到255逐渐由暗色变为亮色. 灰度图转换(ITU-R 601-2亮度变换): L = R ...

  10. P1938 [USACO09NOV]找工就业Job Hunt

    P1938 [USACO09NOV]找工就业Job Hunt给边赋予价值,入边的权值为D-Ti,然后从起点开始跑最长路,如果钱的总数超过了D*C,也就是一定有一个城市走了两遍,则有正环,则输出-1 # ...