We may use the tab control sometimes in the project. We can use the Menu and MuliView controls together to solve this problem. Let's take a look.
Next let's take a look at the original code:
Code
<Head runat = "server">
<Title> No title page </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>
Here, we must use CSS to complete the job. In this way, we have not completed the job yet and we have to make it happen,
Click a Tab to get the items in this TAB. we have to write an event Code in Mune.
Protected void menuTabs_MenuItemClick (object sender, MenuEventArgs e)
{
This. MultiView. ActiveViewIndex = Int32.Parse (menuTabs. SelectedValue );
}
In this way, the ID value is displayed in the Tab, which is so simple;
