求javascript/如何控制多个div层显示与隐藏,万分感谢

想做如下效果出来:
<div id="center">
<div id="left">
<ul>
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">链接三</a></li>
<li><a href="#">链接四</a></li>

</ul>
</div>
<div id="right">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
</div>
我想点击左边的链接一显示右边的.a容器内容,其它隐藏。
点击二显示b容器的内容,其它隐藏,注意,这只是随便写点代码,假如左边有十个,或更多的超链接时,用javascript哪种方法更方便?本人刚入门,请各位大哥路过帮手。谢谢!!!!
帮忙附个简单的代码

第1个回答  推荐于2016-09-05
<script>
function showContent(num)
{
for(var i=0;i<right.children.length;i++)
{
right.children(i).style.display="none";
}
right.children(num).style.display="";
}
</script>
<div id="center">
<div id="left">
<ul>
<li><a href="#" onclick="showContent(0)">链接一</a></li>
<li><a href="#" onclick="showContent(1)">链接二</a></li>
<li><a href="#" onclick="showContent(2)">链接三</a></li>
<li><a href="#" onclick="showContent(3)">链接四</a></li>

</ul>
</div>
<div id="right" style="width:200;height:100;background-color:#abcdef">
<div class="a" style="display:none">一的内容</div>
<div class="b" style="display:none">二的内容</div>
<div class="c" style="display:none">三的内容</div>
<div class="d" style="display:none">四的内容</div>
</div>
</div>本回答被提问者采纳
第2个回答  2009-09-13
你给div去一样的名字

用var divs=getElementByNames()获取

遍历divs,把他们都隐藏,你要显示的div除外(用if判断下)

javascript\/如何控制多个div层与层显示与隐藏,万分感谢
在你要控制的层里写 onclick="change(id名)"

如何用js通过下拉菜单来实现div的隐藏和显示
1、首先写出架构,两个 buttod (按钮)。2、下面是一个 div 存放文本和在后面的被js控制。3、先用 css 选择器 为 div 控制属性。4、然后写出 script 标签,可以写在外部,然后在引用。5、然后我们用 js 设置变量,这样我们才可以控制变量来控制元素。6、这里用 alert 测试一次我们是否选对了元...

js多个button控制多个div显示与隐藏
设置...等var aDiv =document.getElementsByTagName("div")[0].getElementsByTagName("div");\/\/通过input找到5个按钮var aBtn = document.getElementsByTagName("input");\/\/按钮和div文字描述存在一一对应的关系,第几个按钮,就对应要显示的第几个div文字描述\/\/循环给5个按钮添加被点击时的事件for...

...控制指定的div显示,其他层隐藏,用javascript怎么写,求高手指点一下...
1.掌握显示、隐藏div的方法:obj_div.style.display = 'none' | 'block;2.掌握给select添加事件的方法:obj_select.onclick = function(){};3.把option跟div们映射起来:option的value设置成1、2、3...,div的id设置成div1、div2、div3...具备以上技术,你就应该能写出来了。

JS控制多个div显示与隐藏的IE6.0兼容问题,火狐和谷歌浏览器测试通过了...
您好!很高兴为您答疑!兼容问题主要是JavaScript和CSS问题。火狐下您可以使用Firebug检测。css及Javascript写的时候,最好模块化,JavaScript最好使用Jquery,支援多种浏览器。您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。

网页代码 下面是一段隐藏和显示的代码,但是只能用一次,麻烦大家帮忙...
<SCRIPT type=text\/javascript> function show_hiddendiv(n){ document.getElementById("hidden_div"+n).style.display="block";document.getElementById("_strHref"+n).href="javascript:hidden_showdiv("+n+");";document.getElementById("_strSpan"+n).innerHTML="隐藏显示";} function hidden...

...什么问题?开始时div是隐藏的,点击按钮之后div显示,但是点击按钮后没...
"scoreList");if(myId.style.display == "none"){myId.style.display = "block"; \/\/当div是隐藏的时候,点击后会显示} else { myId.style.display = "none";\/\/当div是显示的时候,点击后会隐藏}}<\/script>换成这段代码就行了 你少了个花括号,建议用谷歌浏览器控制台调试 ...

高分求助:asp javascript 由一个下拉菜单的值决定另一个下拉菜单的显示...
你好,在”\/\/alert(displayvalue); \/\/获取a菜单的值正常“的地方加入代码:document.getElementsByName("b")[0].style.display="none";就可以隐藏下拉框b了。

如何选择下拉菜单里不同的选项,来决定显示或隐藏表格里的某一行?_百度...
一个比较笨的方法 <html> <head> <script type="text\/javascript"> function change(id){ if(id==1){ document.getElementById("1").style.display="block";document.getElementById("2").style.display="none";document.getElementById("3").style.display="none";document.getElementById("4...

...到上面就弹出小框(其它网页内容),移开就关闭.如何做?谢谢.
用的是css和JavaScript,只要你给你要这样做的网页元素设置上mouseHover事件和mouseOut事件然后在这两个事件里给你的要弹出的框设置css,也就是在鼠标没过来时候让小框隐藏,Hover的时候让隐藏属性取消就可以了,提示到这,具体的随便查查css和JavaScript的手册就可以做到了,再多说就没意思了,就跟看电影...

相似回答