?
Solved

CSS Tab Changes Based on URL

Posted on 2008-06-10
18
Medium Priority
?
425 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
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!

 
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 2000 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 2000 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 2000 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 2000 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 2000 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

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.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…
Suggested Courses

765 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