Solved

CSS Tab Changes Based on URL

Posted on 2008-06-10
18
411 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

22 Experts available now in Live!

Get 1:1 Help Now