Click here to Skip to main content
Sign Up to vote bad
good
I am trying to get the current tab to be highlighted on a navigation bar to make my pager look more user friendly.
 
I have been unable to use css as the the pseudo classes only work when the page is clicked and reverts to page visited rather than active.
 
I understand JQuery can be used in this case.
I have an empty jquery script at the bottom of my master page.
 
my html in my masterpage is as follows:
 
         <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
                    EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" 
                    onmenuitemclick="NavigationMenu_MenuItemClick">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Index.aspx" Text="Home" />
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                        <asp:MenuItem NavigateUrl="~/Contact.aspx" Text="Contact"/>
                        <asp:MenuItem NavigateUrl="~/Admin/EditPageContent.aspx" Text="Edit Conetent"/>
                        <asp:MenuItem NavigateUrl="~/Portfolio.aspx" Text="Portfolio"/>
                        <asp:MenuItem NavigateUrl="~/Admin/AddToPortfolio.aspx" Text="Manage Portfolio"/>
                    </Items>
                </asp:Menu>
            </div>
 
i am not sure what jquery to use to make the background change stay until anothe rmenu item is clicked.
Posted 28 Feb '13 - 1:20
Edited 28 Feb '13 - 4:18


1 solution

One of the quickest solution I would suggest is that put the below code on every page load and replace "Home" with every page name.
 
Note: There could be many other ways of doing this... One of the quickest way is server side coding as you have only 6 pages.
 
if (!IsPostBack)
            {
                Menu M = (Menu)this.Master.FindControl("NavigationMenu");
                foreach (MenuItem item in M.Items)
                {
                    if (item.Text == "Home")//Replace Home with the page name
                    {
                        item.Selected = true;
                    }
                }
            }
  Permalink  
Comments
Member 9599975 - 28 Feb '13 - 15:30
I have added the code to my page but it does not work.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Arun Vasu 394
1 OriginalGriff 370
2 Sergey Alexandrovich Kryukov 313
3 Tadit Dash 213
4 Maciej Los 191
0 Sergey Alexandrovich Kryukov 9,955
1 OriginalGriff 7,589
2 CPallini 4,028
3 Rohan Leuva 3,422
4 Maciej Los 2,949


Advertise | Privacy | Mobile
Web01 | 2.6.130523.1 | Last Updated 28 Feb 2013
Copyright © CodeProject, 1999-2013
All Rights Reserved. Terms of Use
Layout: fixed | fluid