C# .NET Website - adding a CSS class to menu elements

Question

I've been using PHP for 7 years or so now, but as of today I've been thrust into using .NET for a project. Just for an insite:

This project features:

.NET4 Viewstate = false

Now my issue is this. The main layout is covered by the master page which seems quiet obvious how it works. It also includes nav menu options such as:

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" title="Products">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

Now what I would like to do would be to add a CSS class attribute depending on what page I'm on so if I was on the products page I'd get the following source:

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" class="active" title="Products">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

Any help would be greatly appreciated!

Cheers :)

Answer 1

Lots of ways to do this, one way is to add a script to the "slave" page that sets the class of the appropriate tag.

<li><a href="default.aspx" title="Home" id="aHome" >Home</a></li>
<li><a href="products.aspx" title="Products" id="aProducts">Products</a></li>

Then in products.aspx you can do:

<SCRIPT>document.getElementById('aProducts').setAttribute('class', 'active');</SCRIPT>

Answer 2

It's not an answer to your question, but this was in the CSS category so I figured I'd at least comment :)

I would strongly suggest that you set static classes on each list item, and combined with body classes in the CSS, use something like:

<style type="text/css"><!--
    body.products #menu li.products a,
    body.otherpage1 #menu li.otherpage1 a,
    body.otherpage2 #menu li.otherpage2 a,
    body.otherpage3 #menu li.otherpage3 a,
    body.otherpage4 #menu li.otherpage4 a, { /* your styles here*/ }
--></style>

I think that using C# in order to just set a class is a little overkill, that's all :)