Click here to Skip to main content
12,301,394 members (60,188 online)
Rate this:
 
Please Sign up or sign in to vote.
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:20am
Edited 28-Feb-13 4:18am
v2

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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:30pm
   
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
Top Experts
Last 24hrsThis month


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

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100