Menu+MultiView 实现Tab(不使用图片)

<% ... @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head id ="Head1" runat ="server" >
< title > Tab </ title >
< link rel ="stylesheet" href ="tabber.css" type ="text/css" media ="screen" />
</ head >
< body >
< form id ="form1" runat ="server" >
< center >
< table border ="0" cellpadding ="0" cellspacing ="0" >
< tr >
< td >
< table border ="0" cellpadding ="0" cellspacing ="0" width ="100%" >
< tr >
< td class ="tabbernav1" >
&nbsp;
</ td >
< td class ="tabbernav" >
< asp:Menu ID ="Menu1" runat ="server" Orientation ="Horizontal" OnMenuItemClick ="Menu1_MenuItemClick" >
< Items >
< asp:MenuItem Text ="张磊" Value ="0" Selected ="True" ></ asp:MenuItem >
< asp:MenuItem Text ="张磊" Value ="1" ></ asp:MenuItem >
< asp:MenuItem Text ="张磊" Value ="2" ></ asp:MenuItem >
</ Items >
< StaticMenuItemStyle CssClass ="tabItem" BorderWidth ="2px" />
< StaticSelectedStyle CssClass ="tabSelected" />
< StaticHoverStyle CssClass ="tabHover" />
</ asp:Menu >
</ td >
< td class ="tabbernav2" >
&nbsp;
</ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td class ="tabcontent" >
< asp:MultiView ID ="MultiView1" runat ="server" ActiveViewIndex ="0" >
< asp:View ID ="Tab1" runat ="server" >
< table width ="600" height ="400" cellpadding ="0" cellspacing ="0" >
< tr valign ="top" >
< td class ="TabArea" style ="width:600px" >
TABVIEW1
</ td >
</ tr >
</ table >
</ asp:View >
< asp:View ID ="Tab2" runat ="server" >
< table width ="600px" height ="400px" cellpadding ="0" cellspacing ="0" >
< tr valign ="top" >
< td class ="TabArea" style ="width:600px" >
TABVIEW2
</ td >
</ tr >
</ table >
</ asp:View >
< asp:View ID ="Tab3" runat ="server" >
< table width ="600px" height ="400px" cellpadding ="0" cellspacing ="0" >
< tr valign ="top" >
< td class ="TabArea" style ="width:600px" >
TABVIEW3
</ td >
</ tr >
</ table >
</ asp:View >
</ asp:MultiView >
</ td >
</ tr >
</ table >
</ center >
</ form >
</ body >
</ html >

tabber.css样式如下

.tabItem
{...} {
border:1pxsolid#778;
background:#DDE;
text-decoration:none;
width:50px;
height:20px;
padding-top:3px;
text-align:center;
}
.tabSelected
{...} {
background-color:#fff;
border-bottom:1pxsolidwhite;
}
.tabHover
{...} {
color:#000;
background:white;
}
.tabbernav
{...} {
margin:0;
font:bold12pxVerdana,sans-serif;
vertical-align:bottom;
width:10px;
}
.tabbernav1
{...} {
margin:0;
padding:3px0;
border-bottom:1pxsolid#778;
font:bold12pxVerdana,sans-serif;
width:5px;
}
.tabbernav2
{...} {
margin:0;
padding:3px0;
border-bottom:1pxsolid#778;
font:bold12pxVerdana,sans-serif;
}
.tabcontent
{...} {
padding:5px;
border:1pxsolid#aaa;
border-top:0;
}