例:默认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. [转]Java Web笔记:搭建环境和项目配置(MyEclipse 2014 + Maven + Tomcat)

    来源:http://www.jianshu.com/p/56caa738506a 0. 绪言 Java Web开发中,除了基础知识外,开发环境搭建,也是一项基本功.开发环境包括了IDE.项目管理.项目 ...

  2. redis centos 6.5 redis版本3.2.8安装过程

    redis作为非关系数据库的典型应用,在庞大的数据通信处理有着自己强大的优势,今天也自己来开始学些redis. 以下每一个语句都是我执行的命令. 按照所查资料分析,需要tcl测试工具,这个在cento ...

  3. lvs-dr

    第5节  dr模型 在rs上配置 :rip  和vip   vip定义在lo别名上 Director 上配置:vip  和dip 都只需要一块网卡  网卡都桥接 Vip: 192.168.0.105 ...

  4. BZOJ3451 Tyvj1953 Normal 点分治 多项式 FFT

    原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ3451.html 题目传送门 - BZOJ3451 题意 给定一棵有 $n$ 个节点的树,在树上随机点分 ...

  5. 001_ajax学习

    1,XMLHttpRequest 2,window.ActioveXObject(ie浏览器) 3,new ActiveXObject("Microsoft.XMLHTTP") 4 ...

  6. 使用VMware通过vmdk文件创建XP虚拟机

    一.打开VMware workstation10,转到主页,选择“创建新的虚拟机”,然后选择“自定义(高级)”选项 二.虚拟机硬件兼容性选择默认兼容10.0模式,下一步之后,选择“稍后安装操作系统” ...

  7. 041 Spring Boot中排除功能的处理

    这个问题,原本是没有注意,主要是理解的不够深刻. 1.先看我的配置文件 package com.springBoot.ioc.config; import com.springBoot.ioc.con ...

  8. 008 pandas介绍

    一:介绍 1.官网 http://pandas.pydata.org/ 2.说明 Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了 ...

  9. POJ 2912 Rochambeau(暴力)+【带权并查集】

    <题目链接> 题目大意: n个人进行m轮剪刀石头布游戏(0<n<=500,0<=m<=2000),接下来m行形如x, y, ch的输入,ch='='表示x, y平局 ...

  10. 解决UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-1: ordinal not in range

    字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unicode编码(en ...