求javascript/如何控制多个div层显示与隐藏,万分感谢
想做如下效果出来:<divid="center"><divid="left"><ul><li><ahref="#">链接一</a></li><li><ahref="#">...
想做如下效果出来:
<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哪种方法更方便?本人刚入门,请各位大哥路过帮手。谢谢!!!!
帮忙附个简单的代码 展开
<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哪种方法更方便?本人刚入门,请各位大哥路过帮手。谢谢!!!!
帮忙附个简单的代码 展开
2个回答
展开全部
<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>
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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询