Solved

CSS Tab Changes Based on URL

Posted on 2008-06-10
18
413 Views
Last Modified: 2011-10-19
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
Comment
Question by:net_susan
18 Comments
 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 21750282
0
 

Expert Comment

by:behroozi
ID: 21750594
see the attachment may can help you
CSS-Sample.zip
0
 
LVL 1

Author Comment

by:net_susan
ID: 21750675
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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 21

Expert Comment

by:naspinski
ID: 21750769
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
 
LVL 1

Author Comment

by:net_susan
ID: 21750864
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
 
LVL 21

Accepted Solution

by:
naspinski earned 500 total points
ID: 21750949
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
 
LVL 1

Author Comment

by:net_susan
ID: 21752138
Thanks! Will that work if there is a querystring after it?
0
 
LVL 21

Expert Comment

by:naspinski
ID: 21752498
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
 
LVL 1

Author Comment

by:net_susan
ID: 21754903
I tried the first C# version and got this error:
'split' is a 'variable' but is used like a 'method'
0
 
LVL 21

Assisted Solution

by:naspinski
naspinski earned 500 total points
ID: 21754963
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
 
LVL 1

Author Comment

by:net_susan
ID: 21754992
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
 
LVL 21

Assisted Solution

by:naspinski
naspinski earned 500 total points
ID: 21755012
yeah... I am tired :P
0
 
LVL 1

Author Comment

by:net_susan
ID: 21755136
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
 
LVL 1

Author Comment

by:net_susan
ID: 21755154
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
 
LVL 21

Assisted Solution

by:naspinski
naspinski earned 500 total points
ID: 21755186
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
 
LVL 1

Author Comment

by:net_susan
ID: 21755354
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
 
LVL 21

Assisted Solution

by:naspinski
naspinski earned 500 total points
ID: 21755366
try this:

something.CssClass = "class1 class2";

Open in new window

0
 
LVL 1

Author Comment

by:net_susan
ID: 21755568
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
pure CSS responsive image rotation for Ecommerce Product Page images 4 32
HTML5 Get data in table rows 5 26
Jquery keyup 4 17
Create tabs to show divs 9 28
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question