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

最新推荐文章于 2019-07-02 23:27:29 发布

zixin1984

最新推荐文章于 2019-07-02 23:27:29 发布

阅读量290

点赞数

文章标签： menu asp server class border stylesheet

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Multiview.aspx.cs" Inherits="Test_AspNet20_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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">
                                            TAB VIEW 1
                                        </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">
                                            TAB VIEW 2
                                        </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">
                                            TAB VIEW 3
                                        </td>
                                    </tr>
                                </table>
                            </asp:View>
                        </asp:MultiView>
                    </td>
                </tr>
            </table>
        </center>
    </form>
</body>
</html>

复制

保存

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Test_AspNet20_Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
    }
}

复制

保存

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

zixin1984

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Menu+MultiView 实现Tab(不使用图片)

Page Language="C#" AutoEventWireup="true" CodeFile="Multiview.aspx.cs" Inherits="Test_AspNet20_Default" %>html xmlns="http://www.w3.org/1999/xhtml">head runat="server"> title>Tabtitle>
复制链接

扫一扫