Solved

CSS Tab Changes Based on URL

Posted on 2008-06-10
18
409 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now