How dynamic add css class to navagion bar?

Question

4.00/5 (1 vote)

See more:

if I have this code in a user control file(ascx), I want the page current visited has class "active"

XML

<ul>
   <li class="active"><a href="a.html">Home</a></li>
   <li><a href="b.html">About Us</a></li>
</ul>

for example: when I visited b.html, the html source should be:

<ul>
<li ><a href="a.html">Home</a></li>
<li class="active"><a href="b.html">About Us</a></li>
</ul>

Posted 5-Sep-14 21:22pm

JohnsonYuan

Updated 5-Sep-14 21:34pm

sankarsan parida

v2

Add a Solution

Comments

JohnsonYuan 7-Sep-14 16:39pm

in visual studio' menu control, it will auto add 'selected' css class to the current page
you can look this demo at http://aspnet451.planetwrox.com/PhotoAlbums/

It's hard to do for user control, how can I do this in my project?

2 solutions

Solution 1

I think the better ways is to use pseudo code in CSS without changing the html source
ex:

CSS

<style>
 .active a:visited
{
  add css for visited
}
</style>

Posted 5-Sep-14 21:33pm

Dilan Shaminda

Updated 5-Sep-14 21:34pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

JohnsonYuan · Accepted Answer · 2014-09-07T10:36:00

tha's not the point.

In order to set css class to

item, I have to this work like this:
```
<% if(['some case']) { %>
    <li class="active">
<% } else { %>
    <li>
<% } %>
```
I think the key is how to determine the case to check whether to add css class.

How can I know which page I'm loading now?

It's not like news_list.aspx?id=14 that I can add css class by querystring,
I have to page's like news_list.aspx, index.aspx...