[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 433
  • Last Modified:

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

0
net_susan
Asked:
net_susan
5 Solutions
 
Loganathan NatarajanLAMP DeveloperCommented:
0
 
behrooziCommented:
see the attachment may can help you
CSS-Sample.zip
0
 
net_susanAuthor Commented:
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
naspinskiCommented:
I came up with this solution on a prior question:
http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_23415735.html?cid=236#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

0
 
net_susanAuthor Commented:
Oh, if I did it that way it would have to be in C#. (I was thinking JavaScript.) This is what I mean, though.
0
 
naspinskiCommented:
thats no problem, easier in c# anyway.  though you would have to change your aspx from <a href's to <asp:HyperLink's with IDs tab1, tab2, tab3, etc for this to work:
string[] split = Request.Url.ToString().Split(new char[] {'/'}, System.StringSplitOptions.None);
string endsWith = split(split.Length - 1).ToLower();
switch (endsWith)
{
    case "food.aspx": tab2.CssClass = "selected_css_class"; break;
    case "home.aspx": tab3.CssClass = "selected_css_class"; break;
    case "living.aspx": tab4.CssClass = "selected_css_class"; break;
    case "family.aspx": tab5.CssClass = "selected_css_class"; break;
    case "chores.aspx": tab5.CssClass = "selected_css_class"; break;
    default : tab1.CssClass = "selected_css_class"; break;
}

Open in new window

0
 
net_susanAuthor Commented:
Thanks! Will that work if there is a querystring after it?
0
 
naspinskiCommented:
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

0
 
net_susanAuthor Commented:
I tried the first C# version and got this error:
'split' is a 'variable' but is used like a 'method'
0
 
naspinskiCommented:
sorry, I screwed up the conversion, this one is tested and will work with querystrings.

Just insert this in place of the old top 2 lines
string endsWith = split[split.Length - 1].ToLower();
endsWith = (endsWith.Split(new char[] {'?'}, System.StringSplitOptions.None))[0];

Open in new window

0
 
net_susanAuthor Commented:
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

0
 
naspinskiCommented:
yeah... I am tired :P
0
 
net_susanAuthor Commented:
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

0
 
net_susanAuthor Commented:
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'
0
 
naspinskiCommented:
You will have to change your links to <asp:hyperlink ...> or something with a cssclass for this to work.

Or change the cssclass reference to a .Attribute change
0
 
net_susanAuthor Commented:
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

0
 
naspinskiCommented:
try this:

something.CssClass = "class1 class2";

Open in new window

0
 
net_susanAuthor Commented:
Of course. I actually tried that before I asked, and it didn't work (but it didn't work for another reason).  Thanks again!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now