Menu+MultiView 实现Tab(不使用图片)
Menu+MultiView 实现Tab(不使用图片)
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Multiview.aspx.cs" Inherits="Test_AspNet20_Default" %>2
3
<html xmlns="http://www.w3.org/1999/xhtml">4
<head runat="server">5
<title>Tab</title>6
<link rel="stylesheet" href="tabber.css" type="text/css" media="screen" />7
</head>8
<body>9
<form id="form1" runat="server">10
<center>11
<table border="0" cellpadding="0" cellspacing="0">12
<tr>13
<td>14
<table border="0" cellpadding="0" cellspacing="0" width="100%">15
<tr>16
<td class="tabbernav1">17
18
</td>19
<td class="tabbernav">20
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" OnMenuItemClick="Menu1_MenuItemClick">21
<Items>22
<asp:MenuItem Text="吴锋" Value="0" Selected="True"></asp:MenuItem>23
<asp:MenuItem Text="吴锋" Value="1"></asp:MenuItem>24
<asp:MenuItem Text="吴锋" Value="2"></asp:MenuItem>25
</Items>26
<StaticMenuItemStyle CssClass="tabItem" BorderWidth="2px" />27
<StaticSelectedStyle CssClass="tabSelected" />28
<StaticHoverStyle CssClass="tabHover" />29
</asp:Menu>30
</td>31
<td class="tabbernav2">32
33
</td>34
</tr>35
</table>36
</td>37
</tr>38
<tr>39
<td class="tabcontent">40
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">41
<asp:View ID="Tab1" runat="server">42
<table width="600" height="400" cellpadding="0" cellspacing="0">43
<tr valign="top">44
<td class="TabArea" style="width: 600px">45
TAB VIEW 146
</td>47
</tr>48
</table>49
</asp:View>50
<asp:View ID="Tab2" runat="server">51
<table width="600px" height="400px" cellpadding="0" cellspacing="0">52
<tr valign="top">53
<td class="TabArea" style="width: 600px">54
TAB VIEW 255
</td>56
</tr>57
</table>58
</asp:View>59
<asp:View ID="Tab3" runat="server">60
<table width="600px" height="400px" cellpadding="0" cellspacing="0">61
<tr valign="top">62
<td class="TabArea" style="width: 600px">63
TAB VIEW 364
</td>65
</tr>66
</table>67
</asp:View>68
</asp:MultiView>69
</td>70
</tr>71
</table>72
</center>73
</form>74
</body>75
</html>76
77
using System;78
using System.Data;79
using System.Configuration;80
using System.Collections;81
using System.Web;82
using System.Web.Security;83
using System.Web.UI;84
using System.Web.UI.WebControls;85
using System.Web.UI.WebControls.WebParts;86
using System.Web.UI.HtmlControls;87
88
public partial class Test_AspNet20_Default : System.Web.UI.Page89
{90
protected void Page_Load(object sender, EventArgs e)91
{92
93
}94
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)95
{96
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);97
}98
}99
100
//tabber.css101
.tabItem102
{103
border: 1px solid #778;104
background: #DDE;105
text-decoration: none;106
width: 50px;107
height: 20px;108
padding-top: 3px;109
text-align: center;110
}111
.tabSelected112
{113
background-color: #fff;114
border-bottom: 1px solid white;115
}116
.tabHover117
{118
color: #000;119
background: white;120
}121
.tabbernav122
{123
margin: 0;124
font: bold 12px Verdana, sans-serif;125
vertical-align: bottom;126
width: 10px;127
}128
.tabbernav1129
{130
margin: 0;131
padding: 3px 0;132
border-bottom: 1px solid #778;133
font: bold 12px Verdana, sans-serif;134
width: 5px;135
}136
.tabbernav2137
{138
margin: 0;139
padding: 3px 0;140
border-bottom: 1px solid #778;141
font: bold 12px Verdana, sans-serif;142
}143
.tabcontent144
{145
padding: 5px;146
border: 1px solid #aaa;147
border-top: 0; 148
}149
浙公网安备 33010602011771号