div隐藏和显示

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div隐藏和显示相关的知识，希望对你有一定的参考价值。

一个页面有三个链接,a,b,c，一个链接控制一个div，点击一个链接，就显示这个链接的div,,其他的div是隐藏的，

以下内容放在html的<head></head>标签对中：

function show(id)

var showDiv=document.getElementById(id);

var divList=document.getElementsByTagName('div');

alert(divList.length);

for(i=0;i<divList.length;i++)

if(divList[i].id==id)

divList[i].style.display='block';

else

divList[i].style.display='none';

</script>

以下内容放在body中：

<div id="a" style="margin: 10px; border: 1px solid blue; display: none;">a控制的div</div>

<div id="b" style="margin: 10px; border: 1px solid red; display: none;">b控制的div</div>

<div id="c" style="margin: 10px; border: 1px solid green; display: none;">c控制的div</div>

追问

请问，如果不是获取列表为div的控件，而是获取div的名字，成为一个LIST可以吗

追答

如果用了其它的插件（比如jquery）的话，应该还是比较简单，但是直接用js获取的话，就要另外写一个方法了。

参考技术A 我只写关键的哦，首先将div设置一个id 比如：id="div1" 将div1的CSS默认的显示方式设置为display,然后再通过JS的点击事件将display换成block。
function showHide()

var oDiv=document.getElementById('div1');

if(oDiv.style.display=='block')

oDiv.style.display='none';

else

oDiv.style.display='block';

</script>

最后将a b c 的各自设置一个onclick="showHide()" 即可！追问

你这只能控制一个div

div 的显示隐藏问题

一个页面有两个div 层，和两个按钮，就是说我选择其中一个div显示而点击另一个div 显示的时候，界面必须只能显示一个div。

这个就用jquery了，很方便在你的页面里包含一个jquery的js文件，先网上下下来，放在你的一个目录下包含到页面里<script src="js文件的目录" type="text/javascript"></script> <div class="div1" style="display:none;">先设置为隐藏</div><div class="div2">这个为显示的</div>两个按钮<input type="button" name="button1" value="button1" onclick="Button1();"/><input type="button" name="button2" value="button2" onclick="Button2();"/> <script type="text/javascript">//点击button1，显示div1；反之，显示div2function Button1() $(".div1").show(); $(".div2").hide(); function Button2() $(".div1").hide(); $(".div2").show();</script>这个是最简单的jquery运用参考技术A <style>
buttonoutline:0;
divwidth:300px;height:200px;display:none;
.redcolor:#fff;background:red;
.bluecolor:#fff;background:blue;
</style>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function()
$('button').click(function()
var index=$(this).index();//获取被点击的按钮索引
$('div').eq(index).show().siblings('div').hide();//图层切换，不受限制，可随意加减按钮和图层，只要按钮跟图层数量一致即可。
$(this).addClass($('div').eq(index).attr('class')).siblings('button').removeAttr('class');//让按钮背景也和图层一致。
).eq(0).click();//默认第一个按钮被点击。
);
</script>
<button>红色层</button><button>蓝色层</button>
<div class="red"></div><div class="blue"></div>

以上是关于div隐藏和显示的主要内容，如果未能解决你的问题，请参考以下文章