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

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;
}

你可能感兴趣的:(view)