点击按钮显示或隐藏Div块

通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换。

代码如下：

方法一：

<!DOCTYPE html>
<html>
<head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("#div1").toggle();});});</script>
</head>
<body><h3>点击按钮显示或隐藏Div块</h3><button type="button">按钮</button><div id="div1" style="border:2px solid #ff0000">再点击一下按钮我就会隐藏起来.</div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
<head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">function showOrHide(){var div = $("#div1").get(0);if(div.style.display == ""){div.style.display = "none";}else{div.style.display = "";}}</script>
</head>
<body><h3>点击按钮显示或隐藏Div块</h3><button οnclick="showOrHide()" type="button">按钮</button><div id="div1" style="display: none;border:2px solid #ff0000;">再点击一下按钮我就会隐藏起来.</div>
</body>
</html>

效果如下：

点击按钮显示或隐藏Div块相关推荐

jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
点击按钮显示和隐藏图片
1.新建一个HTML文件以及css样式文件还有js 2.把css文件以及js引入HTML 3.写入一个div并设置类名 4.在div内写入一个img然后导入图片并给这个img设置类名以及id 5.在d ...
React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
react实现div隐藏_React 点击按钮显示div与隐藏div
React 点击按钮显示div与隐藏div .m-test{width: 100px;height: 100px;background-color: red;} class Toggle extend ...
Android之按钮点击事件——显示图片隐藏图片
哈喽!时隔两个月,我又和大家见面啦! 今天,我要分享的内容一如既往的很基础,即关于Android的按钮点击事件--显示图片&&隐藏图片,它的执行过程比较简单,所以这里我就不放什么图片或 ...
点击按钮显示文字，再次点击隐藏文字
点击按钮显示文字,再次点击隐藏文字点击按钮显示文字,再次点击按钮隐藏文字通过if条件判断css样式来做 <!DOCTYPE html> <html lang="en&q ...
项目--点击按钮显示资料，点击空白处隐藏资料
点击空白处隐藏资料点击按钮显示资料在这里插入代码片 <!DOCTYPE html> <html lang="en"><head><met ...
html点击隐藏divjq,jquery点击a标签怎么显示和隐藏div?详解
你知道jquery点击a标签要如何才能够显示以及隐藏div吗?下面的文章要给大家讲解的就是这个方面的内容哦,一起来看看吧. 1.新建一个html文件,命名test.html,用来讲解jquery点击a ...
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 15种方法实现div显示和隐藏 body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddi ...

点击按钮显示或隐藏Div块

点击按钮显示或隐藏Div块相关推荐

最新文章

热门文章