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?
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>
ref. http://www.dynamicdrive.com/style
see the attachment may can help you
CSS-Sample.zip
CSS-Sample.zip
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
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
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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];
ASKER
I tried the first C# version and got this error:
'split' is a 'variable' but is used like a 'method'
'split' is a 'variable' but is used like a 'method'
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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];
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
} 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>
ASKER
This is very helpful, btw. I probably seem ungrateful. The first error was:
'System.Web.UI.HtmlControl s.HtmlAnch or' does not contain a definition for 'CssClass'
'System.Web.UI.HtmlControl
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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;
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Of course. I actually tried that before I asked, and it didn't work (but it didn't work for another reason). Thanks again!