如何实现在同一位置上根据前面一列（表数据或ul无序数据）中的数据，动态切换显示内容?????

如上图中的数据所示，当对前面列的A、B、C、D、E分别点击时，在后面显示详情。假设现在是单击C的结果，但当单击A时如何让A的详情显示在后面，而C的详情不再显示。里面的详情可用不同的颜色进行区别，红色即不可再点击了，而白色还可继续点击，展开下一级的详情。
假如将A、B、C、D、E的详情分别用5个div来显示，然后通过动态显隐藏实现话，将会是只能固定的写入数据，一个个的写入div，在将其显示。同时让A、B、C、D、E的详情都显示在同一个位置也比较困难！
能否有啥好方法实现此功能????????????

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

是的，图是可以随意定的，我上传的是个参考，希望能明白啥意思！也就是根据前面的列的值，在后面的同一位置分别显示其更为详细的信息，但单击A时，显示A的详细信息，当单击B时，显示B的详细信息，要求单击A显示的详细信息和单击B显示的详细信息在同一个位置上显示。。也即动态的单击A、B、C、D、E，分别动态的显示其更为详细的信息在同一位置上显示出来！！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i in lis) {
lis[i].onclick = function(tmp) {
return function() {
var divs = document.getElementById("picbox").getElementsByTagName("div");
for(var j in divs) {
if(divs[j].className == "show") {
divs[j].removeAttribute("class");
}
if(j == tmp) {
divs[j].className = "show";
}
}
}
}(i);
}
};
</script>
<style type="text/css">
li {
cursor:pointer;
width:50px;
}
ul {
margin:0;
padding:0;
float:left;
}
#picbox div{
display:none;
}
#picbox .show {
display:block;
}
</style></head>
<body>
<div id="picbox">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>
  <div class="show">我是内容A</div>
  <div>我是内容B</div>
  <div>我是内容C</div>
  <div>我是内容D</div>
  <div>我是内容E</div>
</div>
</body>
</html>
如果用jQuery实现会简单更多的~我这个是手写的一个小DEMO。估计够你用了
也许还没怎么明白我的意思吧，就是希望单击了A、B、C、D、E后在后面的同一位置显示单击了的内容，而不是把A、B、C、D、E的信息每单击一次动态的添加其内容，而是单击了A话，就显示A的内容，单击B话，就显示B的内容，而A的内容不显示了，隐藏或者移除了。而且显示A、B的内容都让它在同一位置显示。更为严格的是，当单击A后显示A里的内容时，如果内容的背景为红、蓝时就不可以在点击了，而背景为绿、白时还要求进一步的可以再点击，展开其下一级的内容，依此类似，单击B后显示B里的内容时，也将再根据背景色判断可否再点击。现在呢，如果能实现，单击A、B、C、D、E后在后面的同一位置只显示被单击了那个元素的内容也就差不多了吧，下一级根据背景色判断可否再点击，应该也类似实现方法吧！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
    var lis = document.getElementsByTagName("li");
var div = document.getElementById("picbox").getElementsByTagName("div")[0];
    for (var i in lis)    {
        lis[i].onclick = function(tmp) {
return function() {
div.innerHTML = lis[tmp].innerHTML;

};
}(i);
    }
};
</script>
<style type="text/css">
li    {
    cursor:pointer;
    width:50px;
}
ul    {
    margin:0;
    padding:0;
    float:left;
}
</style></head>
<body>
<div id="picbox">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>
<div></div>
</div>
</body>
</html>
我在搜搜问问中提问的图应该更为清晰，你可以看看大致意思！问问链接地址，那个图可以清晰的明白啥意思！！
http://wenwen.soso.com/z/q235519875.htm?pid=w.idx.wenwen.hydt&ch=w.idx.wenwen.hydt看看能否更为明白些，看能否帮我把下级的内容也实现下？？？？？？？？？？？？？？？？？？
问问链接地址，那个图可以清晰的明白啥意思！！http://wenwen.soso.com/z/q235519875.htm?pid=w.idx.wenwen.hydt&ch=w.idx.wenwen.hydt