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

最新推荐文章于 2025-11-27 14:05:49 发布

最新推荐文章于 2025-11-27 14:05:49 发布 · 139 阅读

文章标签：

#xhtml #c#

本文介绍了一个使用ASP.NET实现的带标签页切换功能的示例应用。该示例利用了ASP.NET中的Menu和MultiView控件来实现标签页导航和内容切换的功能，并通过自定义CSS样式美化界面。

<%...@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">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<linkrel="stylesheet"href="tabber.css"type="text/css"media="screen"/>

</head>

<body>

<formid="form1"runat="server">

<tableborder="0"cellpadding="0"cellspacing="0">

<tr>

<td>

<tableborder="0"cellpadding="0"cellspacing="0"width="100%">

<tr>

<tdclass="tabbernav1">

</td>

<tdclass="tabbernav">

<asp:MenuID="Menu1"runat="server"Orientation="Horizontal"OnMenuItemClick="Menu1_MenuItemClick">

<Items>

<asp:MenuItemText="张磊"Value="0"Selected="True"></asp:MenuItem>

<asp:MenuItemText="张磊"Value="1"></asp:MenuItem>

<asp:MenuItemText="张磊"Value="2"></asp:MenuItem>

</Items>

<StaticMenuItemStyleCssClass="tabItem"BorderWidth="2px"/>

<StaticSelectedStyleCssClass="tabSelected"/>

<StaticHoverStyleCssClass="tabHover"/>

</asp:Menu>

</td>

<tdclass="tabbernav2">

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tdclass="tabcontent">

<asp:MultiViewID="MultiView1"runat="server"ActiveViewIndex="0">

<asp:ViewID="Tab1"runat="server">

<tablewidth="600"height="400"cellpadding="0"cellspacing="0">

<trvalign="top">

<tdclass="TabArea"style="width:600px">

TABVIEW1

</td>

</tr>

</table>

</asp:View>

<asp:ViewID="Tab2"runat="server">

<tablewidth="600px"height="400px"cellpadding="0"cellspacing="0">

<trvalign="top">

<tdclass="TabArea"style="width:600px">

TABVIEW2

</td>

</tr>

</table>

</asp:View>

<asp:ViewID="Tab3"runat="server">

<tablewidth="600px"height="400px"cellpadding="0"cellspacing="0">

<trvalign="top">

<tdclass="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;

}