常见问题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(); //显示
});
常见问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。的更多相关文章
- jquery点击添加样式,再点击取出样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- radio点击一下选中,再点击恢复未选状态
radio点击一下选中,再点击恢复未选状态 实现方式1: <input type="radio" id="cat" name="ca ...
- js计时器,点击开始计时,再点击停止
点击倒计时开始,点击停止,再次点击又开始,再点停止... <i id=</i>秒 <em onclick="timeOpen();">开始</e ...
- Android:GridView中实现点击Item变色,再点击还原。
使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...
- 原声js,取消事件冒泡,点击按钮,显示box,点击屏幕其他地方,box隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 点击图片放大,再点击缩小还原
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个
效果: <div class="relFacilityTitcon"> <i v-for="(item,index) in facilityList&q ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
随机推荐
- 一起学Hive——总结各种Join连接的用法
Hive支持常用的SQL join语句,例如内连接.左外连接.右外连接以及HiVe独有的map端连接.其中map端连接是用于优化Hive连接查询的一个重要技巧. 在介绍各种连接之前,先准备好表和数据. ...
- 一起学Hadoop——Hadoop的前世今生
Hadoop是什么? Hadoop是一个处理海量数据的开源框架.2002年Nutch项目面世,这是一个爬取网页工具和搜索引擎系统,和其他众多的工具一样,都遇到了在处理海量数据时效率低下,无法存储爬取网 ...
- eclipse发布后在tomcat下没有文件夹,服务器的Server locations不能修改
主要是因为Server locations中的deploy路径不正确,要修改这个路径,需要移除服务器中的所有项目,然后点击清空,这时再双击服务器,既可修改这个设置.
- ionic2程序调试
新手一枚,之前一直做.net开发,最近接触Ionic2,也没有人带,只能自己一点点抠文档,查资料.一直苦于无法直接调试打包发不好的app,只能在代码里面加上alert一点一点的抛出要看信息,感觉就像瞎 ...
- BZOJ2527 [Poi2011]Meteors 整体二分 树状数组
原文链接http://www.cnblogs.com/zhouzhendong/p/8686460.html 题目传送门 - BZOJ2527 题意 有$n$个国家. 太空里有$m$个太空站排成一个圆 ...
- psp表格记录-
PSP2.1 Personal Software Process Stages Time Planning 计划 · Estimate · 估计这个任务需要多少时间 12 Development 开发 ...
- Python图表数据可视化Seaborn:3. 线性关系数据| 时间线图表| 热图
1. 线性关系数据可视化 lmplot( ) import numpy as np import pandas as pd import matplotlib.pyplot as plt import ...
- 给定一个非负整数 numRows,生成杨辉三角的前 numRows 行。
该题还是考杨辉三角计算,只不过最后每一行都放入List集合中,然后返回,直接看代码: public static List<List<Integer>> generate(in ...
- 自定义PDO封装类
<?php class Db { protected static $_instance = null; // 定义标识符(通过$_instance值得改变情况,来判定Model类是否被实例化) ...
- 【python】数据库
No1: [SQLite] 插入 # 导入SQLite驱动: >>> import sqlite3 # 连接到SQLite数据库 # 数据库文件是test.db # 如果文件不存在, ...