常见问题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>云蚂 ...
随机推荐
- 【SpringBoot】常用注解
@EnableAutoConfiguration 启动自动装载:使用了这个注解之后,所有引入的jar的starters都会被自动注入.这个类的设计就是为starter工作的. @RestControl ...
- yum安装mongodb
1.创建mongodb.repo文件 在/etc/yum.repos.d/目录下创建文件mongodb.repo,它包含MongoDB仓库的配置信息,内容如下: 复制代码代码如下: [mongodb] ...
- java流程控制语句总结
1.选择结构 if 方式1: 格式: if(条件表达式) { 语句体; } 执行流程: 如果条件表达式值为true, 执行语句体 如果条件表达式值为false,不执行语句体 方式2: 格式: if(条 ...
- fputcsv导出大量数据
<?php set_time_limit(0); ini_set('memory_limit', '128M'); $fileName = date('YmdHis', time()); hea ...
- x86 版的 Arduino Intel Galileo 开发板的体验、分析和应用
1.前言 在今年(2013)罗马举办的首届欧洲 Make Faire 上,Intel 向对外发布了采用 x86 构架的 Arduino 开发板:Intel Galileo.这无疑是一个开源硬件领域的重 ...
- python_异常处理_断言
一.Python标准异常 常用异常 Exception 常规错误的基类 AttributeError 试图访问一个对象没有的属性 IOError 输入/ 输出异常,基本上是无法打开文件 ImportE ...
- ip 命令
Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务.ifconfig是net-tools中已被废弃使用的一个命 ...
- BZOJ4409 [Usaco2016 Feb]Circular barn 动态规划 斜率优化
原文链接http://www.cnblogs.com/zhouzhendong/p/8724739.html 题目传送门 - BZOJ4409 题意 有一个N个点的环,相邻两个点距离是1.点顺时针标号 ...
- Spring(三)实例化Bean以及注入对象
使用xml实例化bean 在xml中实例化bean的三种方式 <bean id="springService" class="com.zhiyou100.crm.t ...
- 安卓编程资源文件string中对占位符的使用详解
这里将为你详细介绍占位符的使用,将其学以致用,可以达到简化布局文件,减少字符串资源量. 1.在资源文件中的使用. 打开资源文件中的strings.xml文件,进行编辑.如下图所示: 图 1.0 2. ...