常见问题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>云蚂 ...
随机推荐
- 异象石(就是sdio宝藏那题)
题解: 之前这道题写过两次题解了吧.. 实现的时候可以用set<int,cmp>来实现按照dfn排序 代码: 感觉别人的分类讨论比我的简单.. 但我觉得我这个写起来也不烦就不看别人的了.. ...
- 【BZOJ3379】[Usaco2004 Open]Turning in Homework 交作业
题解: 比较容易想到二分答案+时间逆流 这样就变成了经典的路灯问题 f[a][b][0/1] 其实可以不用二分答案 根据倒着考虑我们会发现一定是先走旁边的再走中间的 计算到当前点+下课时间所需的最小时 ...
- 【CF526F】Pudding Monsters
题意: 给你一个排列pi,问你有对少个区间的值域段是连续的. n≤3e5 题解: bzoj3745
- C# 之 日常问题积累(一)
1.响应在此上下文中不可用(Response). 异常:响应在此上下文中不可用 产生异常的过程:在asp.net程序中添加了一个 类.cs ,其中有一段代码如下 : Response.ClearCon ...
- 【Android】Tips for Android developer: “Conversion to Dalvik format failed: Unable to execute dex: null”
Androiddeveloper, I have met a strange problem when I want use a third party jar, it remained me tha ...
- 【Android】Android 广播大全
[Android]Android 广播大全 String ADD_SHORTCUT_ACTION 动作:在系统中添加一个快捷方式. String ALL_APPS_ACTION 动作:列举所有可用的应 ...
- libsecp256k1 与 openssl ecdsa
1. 历史 区块链节点在接收到的用户发送的交易时,首先会验证交易所涉及utxo的可用性.方法是验证用户签名的合法性,涉及的签名算法就是secp256k1,一种椭圆曲线加密算法. 长期以来,实现了该算法 ...
- gcc make 与cmake
1. gcc (1)是什么? 它是GNU Compiler Collection(就是GNU编译器套件),也可以简单认为是编译器.它可以编译很多种编程语言(括C.C++.Objective-C.For ...
- tomcat配置后台管理监控页面
- mysql配置为半同步复制
mysql 半同步插件是由谷歌提供,具体位置/usr/local/mysql/lib/plugin/下,一个是 master用的 semisync_master.so,一个是 slave 用的 sem ...