How would you show which tab is selected on a website built from a template?_问答_开发者

When you click Questions, Tags, Users etc. at the top of stac开发者_JAVA技巧koverflow, the one you're looking at becomes highlighted orange. This is (usually) done by changing the css of one of them to be 'selected'.

If you have a single template that all your pages are built with, and that template includes these buttons across the top, how do you highlight one of them depending on which page you are viewing?

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

(If it matters, I am using ASP.NET MVC 2 and setting up a Master page)

There are various ways of doing this, on a scale of how much of a change you can make to the HTML code.

In the best case scenario, but with the most HTML manipulation, you should be wrapping the link in a strong tag. Whether or not you wrap the anchor in a strong tag or replace it with a strong tag is up to you *, but the strong tag adds semantic meaning to the link that a class attribute does not, meaning the raw HTML still shows that the current link is highlighted. You would need a lot of IF statements or some such logic to achieve this effect programmatically though.

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

In the worst case scenario, with the least HTML manipulation, adding a class to each LI and then altering a body class will allow you to control the appearance of a single navigation element. This is simple to do, but lacks any semantic structure in the 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>

[*] There are lots of opinions on whether a page should link to itself in the site navigation. There are lots of subjective reasons for either case. I'll leave that to you ...

add a class dynamically by checking where you are. in rails, i usually add a "selected" class based on the controller, e.g. if im in the questions controller, i should add a selected class in the question tab. i'm not sure about asp.net (how you check your controller or where you are in the site) but that's the general idea.

This is a great question. I remember having to do this is ASP.NET but havent thought about it for ASP.NET MVC.

For ASP.NET MVC, you could create a user control, but I like the idea of an HTMLHelper extension method. Taking beseku's idea from above, that would be the ultimate output of your control. The method would accept a collection of elements, and from those elements you would then be able to determine the selected page.

Create a MenuTab object that has properties of DisplayText, ActionName, and ControllerName.
Create a System.Web.MVC.HtmlHelper extension that takes a collection of MenuTab as an argument, e.g. public static MvcHtmlString TabbedMenu(this HtmlHelper helper, IEnumerable<MenuTab> menuTabs). Note the return type of MvcHtmlString so it works both with response.write and html.encode.
Inside the body of the above method, you would be able to see via the HtmlHelper if the pages current controller and action matches the controller and action names of any of the passed in MenuTab, and if so, build an ActionLink that has a html class attribute set to your css class for a selected item.

Example usage in you master page would be something like:

<%: 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"} }) %>

in one that I am using, I am additionally passing in an id parameter so I could have multiple menus on the same page (think side and top navigation).

     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>