Css, Button Selection And Html Tags

&

Solution 1:

Assuming your link clicks reload the current page your "My Profile" tag will be always selected.

One option would be to select the current tab via server side script, this can be done many ways however here is one. If the menu is on a master page, you will need to define some way to find out which page you are on server side.

<ul><li <%=CurrentPage == "Profile" ? "class=\"firstactivefirst-active\"" : "" %>>
      <ahref="UserProfileWall.aspx">My Profile</a><spanclass="sep">&nbsp;</span></li><li <%=CurrentPage == "DietPlan" ? "class=\"firstactivefirst-active\"" : "" %>>
      <ahref="DietPlan.aspx">My Diet Plan </a><spanclass="sep">&nbsp;</span></li><li <%=CurrentPage == "WorkOutPlan" ? "class=\"firstactivefirst-active\"" : "" %>>
      <ahref="WorkoutPlan.aspx">My Workout Plan</a><spanclass="sep">&nbsp;</span></li></ul>

This is all pseudo code, but the idea is you only want to set class="first active first-active" when you are on the current page via some sort of server side conditional.

If the menu is on each page, UserProfileWall.aspx, DietPlan.aspx it is a bit easier... UserProfileWall.aspx would be like this:

<ul><liclass="first active first-active"><ahref="UserProfileWall.aspx">My Profile</a><spanclass="sep">&nbsp;</span></li><li><ahref="DietPlan.aspx">My Diet Plan </a><spanclass="sep">&nbsp;</span></li><li><ahref="WorkoutPlan.aspx">My Workout Plan</a><spanclass="sep">&nbsp;</span></li><li><ahref="#">Research</a><spanclass="sep">&nbsp;</span></li><li><ahref="#">Research</a><spanclass="sep">&nbsp;</span></li></ul>

DietPlan.aspx would be like this...

<ul><li><ahref="UserProfileWall.aspx">My Profile</a><spanclass="sep">&nbsp;</span></li><liclass="first active first-active"><ahref="DietPlan.aspx">My Diet Plan </a><spanclass="sep">&nbsp;</span></li><li><ahref="WorkoutPlan.aspx">My Workout Plan</a><spanclass="sep">&nbsp;</span></li><li><ahref="#">Research</a><spanclass="sep">&nbsp;</span></li><li><ahref="#">Research</a><spanclass="sep">&nbsp;</span></li></ul>

And so on for the rest of your pages..

Now this is just one way you could also break this out to a user control that has a property as the current page for example.

This could be done via javascript as well (untested).

$(function(){
     $("a[href='<%=System.IO.Path.GetFileName(Request.PhysicalPath)%>']").parent().addClass("first active first-active");
});

Which should generate something like this:

$(function(){
  $("a[href='DietPlan.aspx']").parent().addClass("first active first-active");
});

Update

Having server script blocks in your *.js files will not be processed by .net (by default), try changing the following: Change:

<asp:ContentPlaceHolderid="ContentPlaceHolder1"runat="server"><scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/JScript.js"type="text/javascript"></script><scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/fns.js"type="text/javascript"></script><scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js"type="text/javascript"></script><scripttype="text/javascript">
    $(function () {
        $('li').removeClass("first active first-active");
        $("a[href='DietPlan.aspx']").parent().addClass("first active first-active");
    });

To:

<asp:ContentPlaceHolderid="ContentPlaceHolder1"runat="server"><scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/JScript.js"type="text/javascript"></script><scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/fns.js"type="text/javascript"></script><scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js"type="text/javascript"></script><scripttype="text/javascript">
$(function () {
  $("a[href='<%=System.IO.Path.GetFileName(Request.PhysicalPath)%>']").parent().addClass("first active first-active");
});

Solution 2:

Define a selected class in your css. ex:

.selected{
background:red;
}

Using jQuery you can do this.

$('li').click(function() {
    $('li').removeClass('selected');
    $(this).addClass('selected');
});

Now only the clicked li link will have the class="selected" and therefore the background red.

Check working example at http://jsfiddle.net/MRVpD/