javascript控制多个div现实与隐藏。

想做如下效果出来：
<div id="center">
<div id="left">
<ul>
<li><a href="#">上一个连接</a>
<a href="#">链接一</a>
<a href="#">链接二</a>
<a href="#">链接三</a>
<a href="#">链接四</a>
<a href="#">下一个连接</a></li>
</ul>
</div>
<div id="right">
<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
</div>
</div>

点击一显示右边的.a容器内容，其它隐藏。
点击二显示b容器的内容，其它隐藏。
已经显示1连接。则无法点击第一个连接。已经显示最后一个连接时候，无法点击最后一个连接
请JS高手多多帮忙下。。给个代码。。
点击显示很简单。
主要实现上一连接和下一个连接功能。由于本人比较菜菜。请高手争取给代码。稍稍全一点。。
谢谢了。。

举报该文章

相关建议 2010-05-30

BODY>
<TABLE width="150" border="1">
<TR>
<TD><a href="#" onclick="showmenu(1)">新闻管理</a><br><div id="div1" style="display:none"><a href="#">添加新闻</a><br>删除新闻<br>修改新闻</div></TD>
</TR>
<TR>
<TD><a href="#" onclick="showmenu(2)">音乐管理</a><br><div id="div2" style="display:none">添加音乐<br>删除音乐<br>修改音乐</div></TD>
</TR>
<TR>
<TD><a href="#" onclick="showmenu(3)">其他管理</a><br><div id="div3" style="display:none">添加其他<br>删除其他<br>修改其他</div></TD>
</TR>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/f2pvqpm72.html

其他看法

第1个回答 2010-05-12

你这个用jquery 很简单，不知道你会用不，你去下载个jquery.js添加引用
然后再在底部写
<script type="text/javascript">
$("div#left a").each(function(){
$(this).click(function(){
var i=$("div#left a").index($(this));
$("div#right div").each(function(){
$(this).css("display","none");
});//先将所有的右边的div隐藏起来
//然后再将合适的显示
});
});
</script>

第2个回答 2010-05-15

这次弄好了 <script>
var nowid;
function xxx(id)
{
var headings = document.getElementsByTagName("div");
for(var i=0;i<headings.length;i++){
if(headings[i].name=="tony"){
var h = headings[i];
h.style.display="none";
}
var myid=document.getElementById(id);
myid.style.display="block";
}
nowid=id;
}

function previ()
{
if(nowid>1)
{
var myid=document.getElementById(nowid);
myid.style.display="none";
nowid=nowid-1;
myid=document.getElementById(nowid);
myid.style.display="block";
}
}

function next()
{
if(nowid<4)
{
var myid=document.getElementById(nowid);
myid.style.display="none";
nowid=nowid+1;
myid=document.getElementById(nowid);
myid.style.display="block";
}
}

</script>

<div id="center">
<div id="left">
<ul>
<li><a href="javascript:previ();">上一个连接</a>
<a href="javascript:xxx('1');">链接一</a>
<a href="javascript:xxx('2');">链接二</a>
<a href="javascript:xxx('3');">链接三</a>
<a href="javascript:xxx('4');">链接四</a>
<a href="javascript:next();">下一个连接</a></li>
</ul>
</div>
<div id="right">
<div class="1" name="tony" id="1">a容器</div>
<div class="2" name="tony" id="2">b容器</div>
<div class="3" name="tony" id="3">c容器</div>
<div class="4" name="tony" id="4">d容器</div>
</div>
</div>

第3个回答 2010-05-12

我自己做的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="qkhhcelb">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
function showmenu(n) {
if (eval("div"+n).style.display=="inline")
{
eval("div"+n).style.display="none";
}
else
{
hiddenall();
eval("div"+n).style.display="inline";
}

}
function hiddenall(){
for (i=1;i<4 ;i++ )
{
eval("div"+i).style.display="none";
}

}

</SCRIPT>
</HEAD>

<BODY>
<TABLE width="150" border="1">
<TR>
<TD><a href="#" onclick="showmenu(1)">新闻管理</a><br><div id="div1" style="display:none"><a href="#">添加新闻</a><br>删除新闻<br>修改新闻</div></TD>
</TR>
<TR>
<TD><a href="#" onclick="showmenu(2)">音乐管理</a><br><div id="div2" style="display:none">添加音乐<br>删除音乐<br>修改音乐</div></TD>
</TR>
<TR>
<TD><a href="#" onclick="showmenu(3)">其他管理</a><br><div id="div3" style="display:none">添加其他<br>删除其他<br>修改其他</div></TD>
</TR>
</TABLE>
</BODY>
</HTML>