例:默认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. mzf的考验

    题解: 比较水吧 显然是平衡树的操作 然后就是写写写 用对拍来查错相比之下直接样例查还是比较容易的 刚开始没有优化常数没开O2就变成暴力分了smg 开了O2就a了 代码: #include <b ...

  2. 【BZOJ3252】攻略

    题解: 首先贪心的会发现我们每次一定会选当前权值和最大的那个 然后在于怎么维护这个最大值 我们发现每个修改实际上是对沿途所有点的子树的修改 所以用线段树维护就可以了.. 另外注意有重复部分,但一定是包 ...

  3. centos 6.8 安装git 报错

    报错信息: Can't locate ExtUtils/MakeMaker.pm in @INC (@INC contains: /usr/local/lib64/perl               ...

  4. 【转】使用Jasob混淆javascript代码

    在平常的web开发中,我们时常需要写一些js的类库,当我们发布自己产品的时候,不得不把源代码分发出去:但是这样就会泄露自己的代码.今天使用了一下Jasob感觉不错: 使用Jasob,我们的JavaSc ...

  5. 基于nopcommerce b2c开源项目的精简版开发框架Nop.Framework

    http://www.17ky.net/soft/70612.html?v=1#0-sqq-1-39009-9737f6f9e09dfaf5d3fd14d775bfee85 项目详细介绍 该开源项目是 ...

  6. cactiEZ 配置

    CactiEZ 中文版是简单有效的cacti中文解决方案,它基于centos6 整合了cacti的相关软件,重新编译的一个新的操作系统 它基于centos6,启动速度快,支持EXT4文件系统,全中文页 ...

  7. docker 安装配置

    1. 安装docker 环境是ubuntu 14.04 参照:  https://help.aliyun.com/document_detail/60742.html # step 1: 安装必要的一 ...

  8. BZOJ1823 [JSOI2010]满汉全席 2-sat

    原文链接http://www.cnblogs.com/zhouzhendong/p/8125944.html 题目传送门 - BZOJ1823 题意概括 有n道菜,分别可以做成满式和汉式(每道菜只能做 ...

  9. json 对象和json字符串

    转载至  http://www.cnblogs.com/cstao110/p/3762056.html JSON字符串与JSON对象的区别 Q:什么是"JSON字符串",什么是&q ...

  10. 利用图片的灰度平均值来进行分类实现手写图片识别(数据集50000张图片)——Jason niu

    from collections import defaultdict import mnist_loader def main(): training_data, validation_data, ...