我们在项目中有的时候可能用到tab控件,我们可以用Menu和MuliView两个控件一起用,就可以解决这个问题,先来看看效果图吧
接下来我们来看看原代码:
Code
<head runat="server"> <title>无标题页</title> <style type="text/css">
html
{}{ background-color:silver;
} .menuTabs {}{ position:relative; top:2px; left:2px; width: 137px; height: 19px; } .tab {}{ border:solid 1px black; border-bottom:none; background-color:#eeeeee; } .selectedTab {}{ border:solid 1px black; border-bottom:solid 1px white; background:white; } .tabBody {}{ border:solid 1px black; padding:20px; background-color:White; }
</style></head><body> <form id="form1" runat="server"> <div> <asp:Menu ID="menuTabs" CssClass="menuTabs" StaticMenuItemStyle-CssClass="tab" StaticSelectedStyle-CssClass="selectedTab" Orientation="Horizontal" runat="server" onmenuitemclick="menuTabs_MenuItemClick" > <Items> <asp:MenuItem Text="tab1" Value="0" Selected="true"></asp:MenuItem> <asp:MenuItem Text="tab2" Value="1" ></asp:MenuItem> <asp:MenuItem Text="tab3" Value="2" ></asp:MenuItem> </Items> </asp:Menu> <div class="tabBody"> <asp:MultiView ID="MultiView" ActiveViewIndex="0" runat="server"> <asp:View ID="view1" runat="server"> fdsa4<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></asp:View> <asp:View ID="view2" runat="server"> fdsafdsa5555<asp:ImageButton ID="ImageButton1" ImageUrl="~/image/s.jpg" runat="server" Width="144px" Height="35px" /></asp:View> <asp:View ID="view3" runat="server"> fd66666666666<asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> </asp:View> </asp:MultiView> </div> </div> </form></body></html>单击一个Tab可以得到这个TAB中的东西啊,我们就得在Mune中写一个事件
Code protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e) { this.MultiView.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue); }