Solved

CSS Tab Changes Based on URL

Posted on 2008-06-10
18
423 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: 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!

 
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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

719 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