ansaurus

Question

Best technique to add selected class to list

Answer 1

A:

You cold put all the string in a list object (anonymous or typed) and loop over.

Then you would only need one LI code block but for so small list it might be to much.

Another solution would be to use jQuery client side to set it. Ad an id or class to each LI corresponding to the value you want to match with and then add client side script that either gets location.url or if that is not applicable, uses a hidden field where you have stored the url to match with.

David Mårtensson 2010-10-27 19:36:47

Answer 2

+1 A:

The easiest way I've found to accomplish your goal is to add a class to the body of your page identifying which page is current through code in the master page. Then, in the CSS, you can do something like this:

#menu li { /* Styles for unselected menu items */ }

body.home #menu li.home,
body.content #menu li.content,
body.winners #menu li.winners
{
    /* Styles for selected menu items */
}

This way, you can also easily add other display logic related to which page you're viewing.

Edit:

You can detect the current URL when outputting the page through accessing the ASP.NET variables, so it shouldn't matter if the menu is defined in the master page. For example:

<% var convertedUrl = Request.Url.ToString().ToLower().Replace('/', '-'); %>
<body class="<%= convertedUrl %>">
  <!-- Rest of page -->
</body>

This would place the class "about-company" in your body if you were on the URL "About/Company."

Jacob 2010-10-27 19:41:13

that's a nice idea, clean and simple :) Thank you for the heads up

balexandre 2010-10-28 06:46:57

the menu is in the master ... so it will never work.

balexandre 2010-10-28 15:30:48

See my update for how to do this in the master page.

Jacob 2010-10-28 17:08:58

ansaurus

tags:

views:

answers:

Best technique to add selected class to list

related questions