如何实现选项卡？要求切换选项卡不刷新。
大家好：
问题如题。
我是用Menu和MultiView两个控件实现的，MultiView里边套View ，当点击某个菜单项时在事件里指定MultiView显示哪一个View 。
但是这样实现需要返回服务器触发事件。
我想做成无刷新的。
请大家赐教！
[解决办法]
csdn的论坛没有很适合讨论 asp.net ajax 技术问题的地方（asp.net论坛现在也是将过于浅显的问题堆在这里）。你可以自己找一些例子学一下，或者搜索一些专门讨论asp.net ajax的论坛。
[解决办法]
其实很简单的东西，不知道怎么说了，几年前我也以为这很难。可接触web没一个月的时候我就发现了，还是懂了本质的东西好啊。去学下JavaScript + XML 吧
[解决办法]
tab.html:
<!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=gb2312 " />
<title> 无标题文档 </title>
<script src= "tabclass.js "> </script>
<link href= "style.css " rel= "stylesheet " type= "text/css ">
<script>
var tabbox1=new TabBox( "tab1 ")
tabbox1.addtab( "p1 ", "留言 ",0)
tabbox1.addtab( "p2 ", "附件 ")
tabbox1.addtab( "p3 ", "关于此控件 ")
</script>
</head>
<body bgcolor= "#AEAEAE ">
<table border= "0 " style= "border-collapse: collapse " bordercolor= "#808080 " cellpadding= "0 " >
<tr>
<td> <script>
tabbox1.init()
</script>
</td>
</tr>
<tr width= "300 ">
<td bgcolor= "#FFFFFF " style= "border:1px #000000 solid;border-top:none " nowrap> <table id=p1>
<tr>
<td> <textarea rows= "6 " name= "S1 " cols= "51 "> </textarea> </td>
</tr>
</table>
<table id=p2>
<tr>
<td> <input type=file > </td>
</tr>
</table>
<table id=p3>
<tr>
<td> 此控件由 <b> <font face= "Verdana "> <font color= "#FF0000 "> puter </font> jam </font> </b> 独立开发 < br> 如果你在使用过程中有什么意见和建议，请到 <a href= "http://puterjam.vipx.net/ " target=_blank> puterjam.vipx.net </a> </td>
</tr>
</table> </td>
</tr>
<script> tabbox1.inithidetab() </script>
</table>
</body>
</html>
style.css
body
{
margin: 6pt;
s}
td
{
font-family: 宋体;
font-size: 12px;
color: #000000;
}
.bd
{
FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3);
}
.tleft
{
background-image: url( '../img/tab1.gif ');
}
.tright
{
background-image: url( '../img/tab3.gif ');
}
.ttop
{
background-image: url( '../img/tab2.gif ');
}
.ttop_over
{
background-image: url( '../img/tab8.gif ');
}
.tbottom
{
background-image: url( '../img/tab4.gif ');
}
.tbottom2
{
background-image: url( '../img/tab6.gif ');
}
.tbottom3
{
background-image: url( '../img/tab7.gif ');
border-bottom: 1px #000000 solid;
}
.getfouce
{
cursor: default;
text-indent: 6px;
font-size: 12px;
background-color: #ffffff;
color:#000000;
FONT-FAMILY: "宋体 ";
font-weight:bold
}
.lostfouce
{
text-indent: 6px;
font-size: 12px;
background-image: url( '../img/tab5.gif ');
border-bottom: 1px #000000 solid;
cursor: hand;
color:#555555;
FONT-FAMILY: "宋体 ";
padding-top:4px
}
.lostfouce_over
{
text-indent: 6px;
font-size: 12px;
cursor: hand;
background-image: url( '../img/tab9.gif ');
border-bottom: 1px #000000 solid;
}
tabclass.js
function TabBox(tabname,type){
var tabbox=this;
this.tabname=tabname;
this.lasttab=1;
this.tabarray=new Array()
this.tabPad=null;
//----保存tab项目数祖----
this.item=function(tabid,caption,dis){
this.tabid=tabid
this.caption=caption
this.dis=dis
}
//----添加tab项目----
this.addtab=function(tabid,caption,dis){
//alert(tabbox.tabarray.length)
tabbox.tabarray[tabbox.tabarray.length]=new tabbox.item(tabid,caption,dis)
}
//--程序初试化----
this.init=function(){
//alert(tabbox.tabname)
if (tabbox.tabarray.length==0) {alert( "没有任何项目 ");return}
document.write( " <div id= ' "+tabbox.tabname+ "div '> ")
tabbox.tabPad=eval( "document.all. "+tabbox.tabname+ "div ")
var tbBoard=document.createElement( "table ")
tabbox.tabPad.insertAdjacentElement( "beforeEnd ",tbBoard);
tbBoard.style.cssText= "border-collapse: collapse "
tbBoard.border= "0 "
tbBoard.cellSpacing= "0 "
tbBoard.cellPadding= "0 "
tbBoard.height= "24 "
tbBoard.width= "100% "
trRow = tbBoard.insertRow(0)
trRow.height= "3 "
var tl=0
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+ '_tabbar1 '
tbCell.rowSpan= "2 "
tbCell.className= "tbottom3 "
tbCell.width= "3 "
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+ '_tabtop1 '
tbCell.noWrap=true
for (i=1;i <tabbox.tabarray.length;i++)
{
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+ '_tabbar '+(i+1)
tbCell.rowSpan= "2 "
tbCell.className= "tbottom "
tbCell.width= "3 "
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+ '_tabtop '+(i+1)
tbCell.noWrap=true
}
tl++
tbCell=trRow.insertCell(tl)
tbCell.id=tabbox.tabname+ '_tabbar '+(tabbox.tabarray.length+1)
tbCell.rowSpan= "2 "
tbCell.className= "tbottom2 "
tbCell.width= "3 "
tbCell.noWrap=true
tl++
tbCell=trRow.insertCell(tl)
tbCell.rowSpan= "2 "
tbCell.width= "100% "
tbCell.noWrap=true
tbCell.style.cssText= "border-bottom:1px #000000 solid; "
//alert(tbBoard.cells.length)
trRow = tbBoard.insertRow(1)
for (i=0;i <tabbox.tabarray.length;i++)
{
tbCell=trRow.insertCell(i)
tbCell.id=tabbox.tabname+ '_tabcon '+(i+1)
tbCell.className= "lostfouce "
if (tabbox.tabarray[i].dis==1)
{
tbCell.innerHTML= " <b> "+tabbox.tabarray[i].caption+ " "+ " </b> "
}
else
{
tbCell.innerHTML=tabbox.tabarray[i].caption+ " "
}
tbCell.tabnum=i+1
tbCell.noWrap=true
tbCell.onclick=function()
{
tabbox.doclick(this.tabnum)
}
tbCell.onmouseover=function()
{
}
tbCell.onmouseout=function()
{
tabbox.doout(this)
}
}
}
this.inithidetab=function(num)
{
for (i=0;i <tabbox.tabarray.length;i++)
{
eval(tabbox.tabarray[i].tabid).style.display= "none "
}
tabbox.doclick(1)
}
this.doclick=function(num,action){
lastbar1=eval(tabbox.tabname+ "_tabbar "+this.lasttab)
nlasttab=this.lasttab+1
lastbar2=eval(tabbox.tabname+ "_tabbar "+nlasttab)
tpbar1=eval(tabbox.tabname+ "_tabbar "+1)
tpbar2=eval(tabbox.tabname+ "_tabbar "+(tabbox.tabarray.length+1))
tabtop=eval(tabbox.tabname+ "_tabtop "+this.lasttab)
tabcon=eval(tabbox.tabname+ "_tabcon "+this.lasttab)
tabtop.className= " "
tabcon.className= "lostfouce "
//alert(lastbar2.className)
lastbar1.className= 'tbottom ';
lastbar2.className= 'tbottom ';
tpbar1.className= 'tbottom3 ';
tpbar2.className= 'tbottom2 ';
eval(tabbox.tabarray[this.lasttab-1].tabid).style.display= "none "
lastbar1=eval(tabbox.tabname+ "_tabbar "+num)
nnum=num+1
lastbar2=eval(tabbox.tabname+ "_tabbar "+nnum)
tabtop=eval(tabbox.tabname+ "_tabtop "+num)
tabcon=eval(tabbox.tabname+ "_tabcon "+num)
lastbar1.className= 'tleft ';
lastbar2.className= 'tright ';
tabtop.className= "ttop "
tabcon.className= "getfouce "
//alert(tabbox.tabarray[num-1].tabid)
eval(tabbox.tabarray[num-1].tabid).style.display= "block "
this.lasttab=num;
}
this.doover=function(obj){
if (obj.className== "lostfouce ")
{
obj.className= "lostfouce_over "
}
}
this.doout=function(obj){
if (obj.className== "lostfouce_over ")
{
obj.className= "lostfouce "
}
}
}
[解决办法]
LS的 强 这么长............
[解决办法]
dhtml
