常见问题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>云蚂 ...
随机推荐
- JSP基础知识➣获取参数和过滤器(四)
JSP表单提交和参数获取 JSP表单提交的两种方式:post和get,通过这两种方式提交的参数到后台,获取参数的值主要由request来处理,获取值的方式有以下几种: getParameter(): ...
- echarts Y轴的刻度 跟数据对应---tooltip-formatter
var xAxisData = ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018- ...
- 阿里巴巴Java开发规范手册
Java开发手册 版本号 制定团队 更新日期 备 注 1.0.0 阿里巴巴集团技术部 2016.12.7 首次向Java业界公开 一.编程规约 (一) 命名规约 1. [强制]所有编程相关命 ...
- 学习Spring必须了解的基础知识——回调机制
上面这张图如果能看得懂就能理解什么是回调机制: A对象在调用a()方法时会调用B对象的b()方法,b()方法必须能调用A对象的callback()方法. 谁白了:a()方法有B对象b()方法的引用,b ...
- Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第七集之SSH远程连接——克隆与更改配置】
一.SSH远程连接 OpenSSH的安装 查看是否安装Openssh:rpm -qa | grep ssh搜索openssh安装包:yum search openssh安装openssh:yum in ...
- Python GUI - tkinter
目录: Tkinter 组件 标准属性 几何管理 代码实例: 1. Label & Button 2. Entry & Text 3.Listbox列表 4.Radiobutton单选 ...
- 2018年中国研究生数学建模竞赛C题 二等奖 赛题论文
2018年中国研究生数学建模竞赛C题 对恐怖袭击事件记录数据的量化分析 恐怖袭击是指极端分子或组织人为制造的.针对但不仅限于平民及民用设施的.不符合国际道义的攻击行为,它不仅具有极大的杀伤性与破坏力, ...
- 【LeetCode算法-9】Palindrome Number
LeetCode第9题 Determine whether an integer is a palindrome. An integer is a palindrome when it reads t ...
- 004.MySQL双主+Keepalived高可用
一 基础环境 主机名 系统版本 MySQL版本 主机IP Master01 CentOS 6.8 MySQL 5.6 172.24.8.10 Master02 CentOS 6.8 MySQL 5.6 ...
- 004.Heartbeat+HAProxy+MySQL半复制高可用架构
一 基础环境 节点 系统版本 MySQL版本 业务IP 心跳IP Master CentOS 7.5 MySQL 5.6 192.168.88.100 192.168.77.100 Slave Cen ...