问题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();   //显示
});
时间: 2024-10-14 12:16:32

问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。的相关文章

jquery点击添加样式,再点击取出样式

<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击添加边框,再点击去掉边框</title> <style> ul li{ float:left; list-style:none; width:50px; height:30px; border:1px solid #E3E3E3; line-height:30px; text-al

在自定义的tabbar 中间按钮 点击出现一个view 再点击view返回

入职第三天 遇到一个小问题 记下来 问题是自定义的tabbar 中间一个加号按钮 点击从下弹出一个view,再点击 view返回 首先再tabbar的view .h添加一个代理方法 在.m中 在tabbar的VC.m中实现代理方法( 我是在这里加了一个判断 反正实现了 菜鸟的做法吧,不加判断 点击回不去) 创建view的V和C 在V中 添加一个单例类 创建了view的坐标 在V.m中 创建好view的show 和dismiss 两个方法 这样大功告成了 中间还有一些细节 我也不知道怎么说 dis

radio点击一下选中,再点击恢复未选状态

实现方式1: <input   type="radio"   id="cat"   name="cat"   value="1"   onclick= "if(this.c==1){this.c=0;this.checked=0}else{this.c=1}"   c="0"/> 实现方式2: <input    type="radio"     n

Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮

纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片. 值得注意三点: 1.其中,主要使用了rotate.它能让文字旋转角度 2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间. 3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值." 1 &

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

点击按钮之后将其设置为不可用状态

点击按钮之后将其设置为不可用状态:不少效果中,希望按钮只能够被点击一次,再点击之后就会被设置为不可用,代码非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>点击按钮之后

js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button> <ul class="menu"> <li><a href="#">首页</a>

React 点击按钮显示div与隐藏div,并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

JavaScript DOM案例点击按钮显示隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <