js 怎么用一个按钮控制DIV来回显示和隐藏
7个回答
展开全部
1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：
2、创建一个button按钮，给按钮设置一个id，名字设置为“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：
3、给div和button设置一些样式，为了美观好看，这里无需设置display，因为默认就是显示的：
4、编写js脚本，这里用到Jquery，给button添加一个点击事件，然后获取div的dom，判断dom中的display属性值，如果是“none”，就显示div，否则则隐藏:
5、全部完成后，按下crtl+s保存，来到编辑器的右侧，观察显示效果，此时div是显示的：
6、点击hide按钮，会发现div消失了，反复点击按钮会重复显示隐藏的效果，以上就是用JS控制div显示隐藏的案例：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试编写示例代码如下：
<html>
<head>
<meta charset="utf-8"/>
<title>显示/隐藏DIV</title>
<script>
function doHide(){
var oDiv = document.getElementById("divTest");
var oButton = document.getElementById("btnTest")
if (oDiv.style.display == "none"){
oDiv.style.display = "block";
oButton.value = "隐藏DIV"
}else {
oDiv.style.display = "none";
oButton.value = "显示DIV"
}
}
</script>
</head>
<body>
<div id="divTest">
this is a div
</div>
<input id="btnTest" type="button" value="隐藏DIV" onclick="doHide();"/>
</body>
</html>
运行截图：
初始：
点击：
再次点击：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
//简单来说就是通过设置按钮的onclick事件来控制div的显示和隐藏。
//比如在CSS中先将div的display设置为"none",那么点击的时候就先查询display值是否为"none"，
//如果为"none"的话，就改为"block"，即显示div；如果不是"block"就改为"none"，隐藏div。
var oButton = document.getElementById("button");//假设HTML中按钮id="button"，并取得。
var oDiv = document.getElementById("div");//假设HTML中div的id="div"，并取得。
oButton.onclick=function(){
if (oDiv.style.display == "none"){
oDiv.style.display = "block";
}else {
oDiv.style.display = "none";
}
}
//还有就是用三元操作符更简洁一些。
望采纳。
//比如在CSS中先将div的display设置为"none",那么点击的时候就先查询display值是否为"none"，
//如果为"none"的话，就改为"block"，即显示div；如果不是"block"就改为"none"，隐藏div。
var oButton = document.getElementById("button");//假设HTML中按钮id="button"，并取得。
var oDiv = document.getElementById("div");//假设HTML中div的id="div"，并取得。
oButton.onclick=function(){
if (oDiv.style.display == "none"){
oDiv.style.display = "block";
}else {
oDiv.style.display = "none";
}
}
//还有就是用三元操作符更简洁一些。
望采纳。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
当div具有hidden属性或display为none时，div会隐藏。例如，要隐藏的div的id为d把下面这个方法绑定到按钮上。
function()｛
if (document.getElementById('d').style.display=='none') {
document.getElementById('d').style.display = '';
} else {
document.getElementById('d').style.display = 'none';
}｝
function()｛
if (document.getElementById('d').style.display=='none') {
document.getElementById('d').style.display = '';
} else {
document.getElementById('d').style.display = 'none';
}｝
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码如下
<!DOCTYPE html>
<html>
<head>
<title>显示/隐藏<title>
<meta charset="utf-8">
</head>
<body>
<button onclick="btn()">显示/隐藏</button>
<div id="main">需要隐藏的内容</div>
<script>
function btn(){
var main=document.getElementById('main');
if(main.style.display=='none'){
main.style.display='block'
}else{
main.style.display='none'
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
