Geek Answers Handbook

How do you show which tab is selected on a website built from a template?

When you click "Questions", "Tags", "Users", etc. at the top of the stackoverflow, the one you are looking becomes highlighted in orange. This (usually) is accomplished by modifying the css of one of them to "select".

If you have one template with which all your pages are built, and this template includes these buttons at the top, how do you select one of them depending on which page you are viewing?

The problem is that you will have one template, not one for each page ... ideas?

(If that matters, I am using ASP.NET MVC 2 and setting up the main page)

+1
source share
4 answers

There are various ways to do this in scale of how many changes you can make to your HTML code.

At best, but with most HTML manipulation, you should wrap the link with a strong tag. Regardless of whether you anchor the anchor in a strong tag or replace it with a strong tag, you can *, but a strong tag adds meaning to a link that does not have a class attribute, which means that raw HTML still shows that the current link is highlighted . To achieve this effect, you will need a lot of IF statements or some kind of logic.

<li><a href="...">Home</a></li>
<li><strong>News</strong></li>
<li><a href="...">About</a></li>

, HTML, LI, body . , HTML .

<style type="text/css">
.in-news .nav-news { font-weight: 600; }
</style>
<body class="in-news">
...
<ul>
<li class="nav-home"><a href="...">Home</a></li>
<li class="nav-news"><a href="...">News</a></li>
<li class="nav-about"><a href="...">About</a></li>
</ul>

[*] , . . ...

+1

, , . "" , . im , . asp.net( ), .

0

. , ASP.NET, ASP.NET MVC.

ASP.NET MVC , HTMLHelper. beseku , . , .

  • MenuTab, DisplayText, ActionName ControllerName.
  • System.Web.MVC.HtmlHelper, MenuTab, . public static MvcHtmlString TabbedMenu(this HtmlHelper helper, IEnumerable<MenuTab> menuTabs). MvcHtmlString, response.write, html.encode.
  • HTMLHelper, MenuTab, , a ActionLink, html, css .

:

<%: Html.TabbedMenu(new List<MenuTab> { new MenuTab{Text="Home", ActionName="Index", ControllerName="Home"}, new MenuTab{Text="Other Page", ActionName="Index", ControllerName="Other Controller"}, new MenuTab{Text="What is this?", ActionName="About", ControllerName="Home"} }) %>

, , id, ( ).

0
     protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e)
    {
        multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue);
        if (menuTabs.Items[0].Selected == true)
        {

            menuTabs.Items[0].ImageUrl = "~/Images/wit1_over.png";
            menuTabs.Items[1].ImageUrl = "~/Images/wit2.png";
        }

        if (menuTabs.Items[1].Selected == true)
        {
            menuTabs.Items[1].ImageUrl = "~/Images/wit2_over.png";
            menuTabs.Items[0].ImageUrl = "~/Images/wit1.png";

        }
    }



       **//design code**
       <asp:Menu ID="menuTabs" CssClass="menuTabs" StaticMenuItemStyle-CssClass="tab" StaticSelectedStyle-CssClass="selectedTab"
            OnMenuItemClick="menuTabs_MenuItemClick" runat="server" Orientation="Horizontal"
            BackColor="#f4f4f4" BorderStyle="None" class="img-swap1">
            <StaticSelectedStyle CssClass="selectedTab"></StaticSelectedStyle>
            <StaticMenuItemStyle CssClass="tab"></StaticMenuItemStyle>
            <Items>
                <asp:MenuItem Text="" Value="0" Selected="true" ImageUrl="Images/wit1_over.png" />
                <asp:MenuItem Text="" Value="1" ImageUrl="Images/wit2.png" />
            </Items>
        </asp:Menu>


        <asp:MultiView ID="multiTabs" ActiveViewIndex="0" runat="server">
            <asp:View ID="view1" runat="server">
              </asp:View>
            <asp:View ID="view2" runat="server">
              </asp:View>
        </asp:MultiView>
0

More articles:


All Articles