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

最新推荐文章于 2025-06-27 09:13:21 发布

iteye_6481

最新推荐文章于 2025-06-27 09:13:21 发布

阅读量129

点赞数

文章标签： xhtml c#

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

}