求助、这样的界面应该怎么样实现呢？

这样的界面应该怎么样实现呢
1、aaa 2、bbb 3、ccc
下边是他们各自对应的表就是说点击aa下边就显示aaa的表的内容
点击bbb就显示bbb的表的内容

解决方案 »

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

如果要做好看点并且代码简洁点的话请好好学div+css布局。
普通只要达到效果的话好好学js就行了。
不太明白
你是说列表控件的隐藏显示?
有visiable属性
就是个选项卡显示啊。
用ajax技术结合div+css
利用for循环，动态控制div或其他的显示与隐藏。
给你段代码，你看看：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>标签示例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT-SIZE: 14px; FONT-FAMILY: "宋体"
}
OL LI {
MARGIN: 8px
}
#con {
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px
}
#tags {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px
}
#tags LI {
BACKGROUND: url(123.files/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
}
#tags LI A {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(123.files/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none
}
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
}
#tags LI.selectTag {
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px
}
#tags LI.selectTag A {
BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
}
#tagContent {
BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff
}
.tagContent {
PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(123.files/bg.gif) repeat-x; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 350px
}
#tagContent DIV.selectTag {
DISPLAY: block
}
</STYLE><META content="MSHTML 6.00.2900.3268" name=GENERATOR></HEAD>
<BODY>
<H1>标签示例</H1>
<DIV id=con>
<UL id=tags>
  <LI><A onClick="selectTag('tagContent0',this)"
  href="javascript:void(0)">标签一</A> </LI>
  <LI class=selectTag><A onClick="selectTag('tagContent1',this)"
  href="javascript:void(0)">标签二</A> </LI>
  <LI><A onClick="selectTag('tagContent2',this)"
  href="javascript:void(0)">自适应宽度的标签</A> </LI></UL>
<DIV id=tagContent>
<DIV class=tagContent id=tagContent0>第一个标签的内容</DIV>
<DIV class="tagContent selectTag" id=tagContent1>第二个标签的内容
<P>标签背景图1：<IMG src="123.files/tagleft.gif" align=top><BR>标签背景图2：<IMG
src="123.files/tagright.gif" align=top><BR>内容渐变背景图(1象素宽)：<IMG
src="123.files/bg.gif" align=top></P></DIV>
<DIV class=tagContent id=tagContent2>第三个标签的内容
<P>放大观看标签背景图：<IMG height=100 src="123.files/tagleft.gif" width=300
align=top></P></DIV></DIV></DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";

}
</SCRIPT>
</BODY></HTML>
你可以利用上述方法一次性加载全部数据，然后再控制显示或隐藏；
或者可以用ajax去动态加载。性能比第一个方法会好很多。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>ReportOrder表结构-2008-3-21</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TD {
FONT-SIZE: 9pt
}
A {
FONT-SIZE: 9pt; COLOR: #990000; TEXT-DECORATION: none
}
</STYLE><META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY>
<TABLE style="BORDER-COLLAPSE: collapse" border=1>
  <TBODY>
  <TR>
    <TD>1 <A href="javascript:show('display0')"><B>Agent</B></A></TD>
    <TD>2 <A href="javascript:show('display1')"><B>Client</B></A></TD></TR></TBODY></TABLE>
<SCRIPT>
function show(name)
{
for (ii=0;ii<2;ii++)
{var tab = eval("document.all.display"+ii);
if  ( tab.id == name ){tab.style.display = "";}
else {tab.style.display = "none";}}
}
</SCRIPT><TABLE id=display0 style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=3
border=1>
  <TBODY>
  <TR>
    <TD colSpan=4>第1个表<B>Agent</B>的结构，共10个字段</TD></TR>
  <TR>
    <TD><B>字段名称</B></TD>
    <TD><B>类型</B></TD>
    <TD><B>类型代码</B></TD>
    <TD><B>长度</B></TD></TR>
  <TR>
    <TD>AgentId</TD>
    <TD>int</TD>
    <TD>3</TD>
    <TD>4</TD></TR>
  <TR>
    <TD>AgentName</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>50</TD></TR>
  <TR>
    <TD>Company</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>50</TD></TR>
  <TR>
    <TD>Area</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>50</TD></TR>
  <TR>
    <TD>Tel</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>20</TD></TR>
  <TR>
    <TD>Address</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>100</TD></TR>
  <TR>
    <TD>WebSite</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>1000</TD></TR>
  <TR>
    <TD>MSN</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>20</TD></TR>
  <TR>
    <TD>Email</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>20</TD></TR>
  <TR>
    <TD>Proportion</TD>
    <TD>float</TD>
    <TD>5</TD>
    <TD>8</TD></TR></TBODY></TABLE>
<TABLE id=display1 style="DISPLAY: none; BORDER-COLLAPSE: collapse"
cellSpacing=0 cellPadding=3 border=1>
  <TBODY>
  <TR>
    <TD colSpan=4>第2个表<B>Client</B>的结构，共14个字段</TD></TR>
  <TR>
    <TD><B>字段名称</B></TD>
    <TD><B>类型</B></TD>
    <TD><B>类型代码</B></TD>
    <TD><B>长度</B></TD></TR>
  <TR>
    <TD>ClientId</TD>
    <TD>int</TD>
    <TD>3</TD>
    <TD>4</TD></TR>
  <TR>
    <TD>ClientName</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>100</TD></TR>
  <TR>
    <TD>Company</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>100</TD></TR>
  <TR>
    <TD>Area</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>50</TD></TR>
  <TR>
    <TD>Tel</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>200</TD></TR>
  <TR>
    <TD>Address</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>200</TD></TR>
  <TR>
    <TD>WebSite</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>1000</TD></TR>
  <TR>
    <TD>MSN</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>100</TD></TR>
  <TR>
    <TD>Email</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>100</TD></TR>
  <TR>
    <TD>Summary</TD>
    <TD>ntext</TD>
    <TD>203</TD>
    <TD>1073741823</TD></TR>
  <TR>
    <TD>Inputer</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>50</TD></TR>
  <TR>
    <TD>Updater</TD>
    <TD>nvarchar</TD>
    <TD>202</TD>
    <TD>50</TD></TR>
  <TR>
    <TD>AddTime</TD>
    <TD>datetime</TD>
    <TD>135</TD>
    <TD>16</TD></TR>
  <TR>
    <TD>LastUpdateTime</TD>
    <TD>datetime</TD>
    <TD>135</TD>
    <TD>16</TD></TR></TBODY></TABLE>
</BODY></HTML>
哪位仁兄帮我个忙啊，非病毒，是俺的帖子
http://topic.csdn.net/u/20080324/09/d38253dc-c687-4c64-9381-3c66168c1b60.html