js中怎么控制一个标签的显示与隐藏

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中怎么控制一个标签的显示与隐藏相关的知识,希望对你有一定的参考价值。

利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用html的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一:

document.getElementById("EleId").style.visibility="hidden";\'设置EleId标签隐藏
document.getElementById("EleId").style.visibility="visible";设置EleId标签显示

利用上述方法实现隐藏后,页面的位置还被控件占用,显示空白。

定义和用法

visibility 属性设置元素是否可见。


方法二:

document.getElementById("EleId").style.display="none";设置EleId标签隐藏
document.getElementById("EleId").style.display="inline";设置EleId标签显示

利用上述方法实现隐藏后,页面的位置不被占用。

定义和用法

display 属性设置元素如何显示。

参考技术A

给你一段代码(手里只有jquery的,原生的我给你的这个例子你看明白了,原生的也没有问题le就)你参考下,核心就是给个变量,点击一次,等于另一个值,再点,值恢复默认,
var n=1;
$(".choose i").on("click",function()

if(n==1)

$("#recommend").css("display","block")

$(this).css("background-position","-110px -49px");

n=2

else

$("#recommend").css("display","none")

$(this).css("background-position","-131px -49px");

n=1


)

参考技术B <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function show()
document.getElementById('a').style.display = 'block';


function hide()
document.getElementById('a').style.display = 'none';

</script>
</head>

<body>
<div><button onclick="show()">显示</button></div>
<div><button onclick="hide()">隐藏</button></div>
<div id="a">来,互相伤害</div>
</body>

</html>本回答被提问者采纳
参考技术C 给你一段代码(手里只有jquery的,原生的我给你的这个例子你看明白了,原生的也没有问题le就)你参考下,核心就是给个变量,点击一次,等于另一个值,再点,值恢复默认,
var n=1;
$(".choose i").on("click",function()
if(n==1)
$("#recommend").css("display","block")
$(this).css("background-position","-110px -49px");
n=2;
else
$("#recommend").css("display","none")
$(this).css("background-position","-131px -49px");
n=1

)
参考技术D JS:document.getElementById("id1").style.display="none";
JQuery: $("#id1").hide();

JS控制多个div显示与隐藏的问题。

function showhidediv(id)
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name')
if (name.style.display=='none')
age.style.display='none';
name.style.display='block';

else
if (age.style.display=='none')
name.style.display='none';
age.style.display='block';




<input name="d2" type="radio" value="1" onClick='showhidediv("name")' />
<input name="d2" type="radio" value="2" onClick='showhidediv("age")' />

<div id="msg_1">1</div>

<div id="msg_2" style="display:none;">2</div>

以上的情况测试没问题,当出现多个div就不行了,如下:

<div id="msg_1">111111</div>
<div id="msg_2" style="display:none;">222222</div>

<div id="msg_1">333333</div>
<div id="msg_2" style="display:none;">444444</div>

<div id="msg_1">555555</div>
<div id="msg_2" style="display:none;">666666</div>

请高手们帮忙看看,只有第一组管用,下面几个都不用呢
请帮忙改改js控制部分

你id都重复了当然不好用,
我看的意思是下半部分成三个部分,如果是这个意思的话,那就把他们用三个div分别包起来。如下:
<div id="msg_1">
<div>111111</div>
<div style="display:none;">222222</div>
</div>
<div id="msg_2">
<div>333333</div>
<div style="display:none;">444444</div>
</div>
<div id="msg_3">
<div>555555</div>
<div style="display:none;">666666</div>
</div>追问

师兄谢谢你了,您的指点有独到的地方,给我很大的帮助,在这里感谢您的帮助,谢谢你了。

参考技术A getElementById()函数只能获取指定id的一个元素,也就是说如果你有多个有着id的元素元素,它只会返回第一个。
你这儿需要用getElementsByName()函数,并且用name来标志元素而不宜用id,如此调用你便能得到指定name的元素的数组,遍历一下就能满足你的需求。追问

师兄谢谢了,问题已经解决,感谢您给予的帮助,谢谢了,师兄。

参考技术B 所有的回复的那个层同一个name,不同的ID可根据你那条心情的ID加点辨析,所有点击回复的事件传回那个层的ID,事件里把所有这个name的层全隐藏,再把传过来的那个ID的层显示,就是点那个就开那个关闭其他的,这个用户体验我觉得更好 参考技术C 觉得你这样每个留言都放一个表单有点浪费...,虽然隐藏了,但是HTML还是在那里,你完全可以用一个隐藏了的表单,当点击回复的时候把那个表单加到当前DIV的最后面并显示出来.. 参考技术D 一个页面中id的值是唯一的,你可用class来监控它。$($('.className').attr()==msg_1).hide();

以上是关于js中怎么控制一个标签的显示与隐藏的主要内容,如果未能解决你的问题,请参考以下文章

如何实现js控制div的隐藏及显现

如何在JS里面来控制ul标签的显示与隐藏?

js控制span显示隐藏

js显示与隐藏元素

怎么用js显示隐藏div

怎样判断jQuery 元素是不是显示与隐藏