利用Menu和MutiView控件实现类似tabControl效果

最新推荐文章于 2026-05-22 22:12:31 发布

原创最新推荐文章于 2026-05-22 22:12:31 发布 · 522 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用ASP.NET中的Menu和MultiView控件来实现类似于TabControl效果的方法。通过设置样式和事件处理，可以创建出具有不同标签页的内容切换功能。

利用Menu和MutiView控件实现类似tabControl效果

2010-05-10 15:41

前台：CSS
<style type="text/css">
html
{
background-color: silver;
}
.menuTabs
{
position: relative;
top: 1px;
left: 10px;
}
.tab
{
border: Solid 1px black;
border-bottom: none;
padding: 0px 10px;
background-color: #eeeeee;
}
.selectedTab
{
border: Solid 1px black;
border-bottom: Solid 1px white;
padding: 0px 10px;
background-color: white;
}
.tabBody
{
border: Solid 1px black;
padding: 20px;
background-color: white;
}
</style>

前台：控件代码
<div>
<asp:Menu ID="menuTabs" CssClass="menuTabs" StaticMenuItemStyle-CssClass="tab" StaticSelectedStyle-CssClass="selectedTab"
Orientation="Horizontal" OnMenuItemClick="menuTabs_MenuItemClick" runat="server">
<Items>
<asp:MenuItem Text="Tab 1" Value="0" Selected="true" />
<asp:MenuItem Text="Tab 2" Value="1" />
<asp:MenuItem Text="Tab 3" Value="2" />
</Items>
</asp:Menu>
<div class="tabBody">
<asp:MultiView ID="multiTabs" ActiveViewIndex="0" runat="server">
<asp:View ID="view1" runat="server">Contents of first tab </asp:View>
<asp:View ID="view2" runat="server">Contents of second tab </asp:View>
<asp:View ID="view3" runat="server">Contents of third tab </asp:View>
</asp:MultiView>
</div>
</div>

后台代码：
protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e)
{
multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue);
}