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

来源：互联网发布：阿里云改系统编辑：程序博客网时间：2024/04/27 13:43

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<tr>

<td>

<tr>

</td>

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

</asp:Menu>

</td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

<asp:View ID="Tab1" runat="server">

TAB VIEW 1

</td>

</tr>

</table>

</asp:View>

<asp:View ID="Tab2" runat="server">

TAB VIEW 2

</td>

</tr>

</table>

</asp:View>

<asp:View ID="Tab3" runat="server">

TAB VIEW 3

</td>

</tr>

</table>

</asp:View>

</asp:MultiView>

</td>

</tr>

</table>

</center>

</form>

</body>

</html>

tabber.css样式如下

.tabItem

{

border: 1px solid #778;

background: #DDE;

text-decoration: none;

width: 50px;

height: 20px;

padding-top: 3px;

text-align: center;

}

.tabSelected

{

background-color: #fff;

border-bottom: 1px solid white;

}

.tabHover

{

color: #000;

background: white;

}

.tabbernav

{

margin: 0;

font: bold 12px Verdana, sans-serif;

vertical-align: bottom;

width: 10px;

}

.tabbernav1

{

margin: 0;

padding: 3px 0;

border-bottom: 1px solid #778;

font: bold 12px Verdana, sans-serif;

width: 5px;

}

.tabbernav2

{

margin: 0;

padding: 3px 0;

border-bottom: 1px solid #778;

font: bold 12px Verdana, sans-serif;

}

.tabcontent

{

padding: 5px;

border: 1px solid #aaa;

border-top: 0;

}