Persist CSS changes over postback

Question

I am using Lavalamp jquery plugin.

The problem with this jquery is upon clicking upon on a menu/or upon postback. The selected menu does not persist.

I come to know that we need to set a css class "current" to the menu which we want to select.

But how should i suppose to know which menu is selected upon postback.

I have these things upto now

<ul class="lavaLamp">
            <li  style="width: 80px;"><a href="#" onclick="getPartial(1)">Home</a></li>
            <li  style="width: 120px;"><a href="#" onclick="getPartial(2)">Contact Us</a></li>
            <li  style="width: 180px;" class="current"><a href="../Home/VolumetricWeight" onclick="getPartial(3)">
                Volumetric Weight</a></li>
            <li  style="width: 130px;"><a href="#" onclick="getPartial(4)">Banned Items</a></li>
            <li  style="width: 150px;"><a href="#" onclick="getPartial(5)">Transportation</a></li>
            <li  style="width: 131px;"><a href="#" onclick="getPartial(6)">Suggestion</a></li>
            <li  style="width: 120px;"><a href="../Home/AboutUs" onclick="getPartial(7)">About
                Us</a></li>
        </ul>


<script language="javascript" type="text/javascript">
function getPartial(variable) {
    $("ul.lavaLamp li").removeClass('current');
    $(this).addClass('current');
}

How should i suppose to go around this?

Answer 1

This is a simple CSS requirement.

follow these links, it'll help you

http://www.search-this.com/2007/06/13/css-current-page-indicator/

http://www.pmob.co.uk/temp/nav-body6.htm

http://www.hicksdesign.co.uk/else/cssnav/faq.html