Link to home
Start Free TrialLog in
Avatar of net_susan
net_susan

asked on

CSS Tab Changes Based on URL

I want to change the CSS class of my tab (the fact that it's a tab isn't important) based on what URL it is on. For example, if they are on http://mysite/living.aspx I want that that and only that tab to have a different CSS class than the others.

How would I go about doing this?
<tr>
	<td id="header" align="center" >
   	  <ul class="nav">
       	<li><a href="\" id="logo"><h1>All Things</h1></a></li>
       	<li><a href="\food.aspx" class="headernav" id="tab" >Food</a></li>
       	<li><a href="\home.aspx"   class="headernav" id="tab">Home</a></li>
       	<li><a href="\living.aspx" class="headernav" id="tab">Life</a></li>
       	<li><a href="\family.aspx"  class="headernav" id="tab">Family</a></li>
       	<li><a href="\chores.aspx" class="headernav" id="tab">Keeping Track</a></li>
       </ul>
    </td>
</tr>

Open in new window

Avatar of Loganathan Natarajan
Loganathan Natarajan
Flag of India image

Avatar of behroozi
behroozi

see the attachment may can help you
CSS-Sample.zip
Avatar of net_susan

ASKER

I should mention that these menus are in a master page, and all other pages are based on the master page. I can't just hard code the class on each page.
I came up with this solution on a prior question:
https://www.experts-exchange.com/questions/23415735/Help-with-the-menu-toggling.html?cid=236&anchorAnswerId=21621417#a21621417
You can just put it into your masterpage Page_Load
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim delimiter() As String = {"/"}
        Dim split() As String = Request.Url.ToString().Split(delimiter, System.StringSplitOptions.None)
        Dim endsWith As String = split(split.Length - 1).ToLower()
        Select Case endsWith
            Case "food.aspx"
                tab2.CssClass = "selected_css_class"
            Case "home.aspx"
                tab3.CssClass = "selected_css_class"
            Case "living.aspx"
                tab4.CssClass = "selected_css_class"
            Case "family.aspx"
                tab5.CssClass = "selected_css_class"
            Case "chores.aspx"
                tab5.CssClass = "selected_css_class"
        End Select
    End Sub

Open in new window

Oh, if I did it that way it would have to be in C#. (I was thinking JavaScript.) This is what I mean, though.
ASKER CERTIFIED SOLUTION
Avatar of naspinski
naspinski
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks! Will that work if there is a querystring after it?
you would have to change this (untested, but i think it will work):
string endsWith = (split(split.Length - 1).ToLower().Split(new char[] {'&'}, System.StringSplitOptions.None))[0];

Open in new window

I tried the first C# version and got this error:
'split' is a 'variable' but is used like a 'method'
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I think you mean to do this in place of the top two lines
string[] split = Request.Url.ToString().Split(new char[] {'/'}, System.StringSplitOptions.None);
string endsWith = split[split.Length - 1].ToLower();
endsWith = (endsWith.Split(new char[] {'?'}, System.StringSplitOptions.None))[0];

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It didn't like CssClass for the a tag (I'll post the error in a second), so I changed it to this code. Now it says:

} expected
<script language="c#" runat=server>
 
public void Page_Load(object sender, EventArgs e)
{
string[] split = Request.Url.ToString().Split(new char[] {'/'}, System.StringSplitOptions.None);
string endsWith = split[split.Length - 1].ToLower();
endsWith = (endsWith.Split(new char[] {'?'}, System.StringSplitOptions.None))[0];
switch (endsWith)
{
    case "tests.aspx": tab.class = "susan"; 
}
}
</script>

Open in new window

This is very helpful, btw. I probably seem ungrateful. The first error was:
'System.Web.UI.HtmlControls.HtmlAnchor' does not contain a definition for 'CssClass'
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You are a genius. Do you happen to know how to allow two classes? If not, no problem. I'll be back to award you your points. Thanks so much!
case "family.aspx": tab5.CssClass = "selected_css_class"; break;

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Of course. I actually tried that before I asked, and it didn't work (but it didn't work for another reason).  Thanks again!