CSS meny + javascript

Tjena!

Jag använder en meny från cssplay (Länk) som jag vill ska minnas den undersida som besökaren valt.
Med hjälp av php hade detta varit busenkelt men eftersom sidan är AJAX-baserad kommer det inte vara några siduppdateringar.... så jag behöver ett javascript för att bestämma vilken undersida besökaren valt (alt. är på).

Hjälp :l

(Menyn, något krympt)

<div id="nav">

<ul class="select"><li><a href="doors_drop_line_three.html?current=one&amp;sub=none"><b>January</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=one&amp;sub=a">Fish</a></li>
<li><a href="doors_drop_line_three.html?current=one&amp;sub=b">Chips</a></li>
<li><a href="doors_drop_line_three.html?current=one&amp;sub=c">Bacon</a></li>
<li><a href="doors_drop_line_three.html?current=one&amp;sub=d">Eggs</a></li>
<li><a href="doors_drop_line_three.html?current=one&amp;sub=e">Tomato</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

<ul class="current"><li><a href="doors_drop_line_three.html?current=two&amp;sub=none"><b>February</b>
</a></li></ul><ul class="sub_active">
<li><a href="doors_drop_line_three.html?current=two&amp;sub=a">Sausages</a></li>
<li><a href="doors_drop_line_three.html?current=two&amp;sub=b">Fried Bread</a></li>
<li class="current_sub"><a href="doors_drop_line_three.html?current=two&amp;sub=c">Fillet steak</a></li>
<li><a href="doors_drop_line_three.html?current=two&amp;sub=d">Mushrooms</a></li>
</ul>

<ul class="select"><li><a href="doors_drop_line_three.html?current=three&amp;sub=none"><b>March</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=three&amp;sub=a">Lager</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp;sub=b">Beer</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp;sub=c">Red wine</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp;sub=d">Crisps</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp;sub=e">Brandy</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

<ul class="select"><li><a href="doors_drop_line_three.html?current=four&amp;sub=none"><b>April</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=four&amp;sub=a">Tea</a></li>
<li><a href="doors_drop_line_three.html?current=four&amp;sub=b">Coffee</a></li>
<li><a href="doors_drop_line_three.html?current=four&amp;sub=c">Milk</a></li>
<li><a href="doors_drop_line_three.html?current=four&amp;sub=d">Squash</a></li>
<li><a href="doors_drop_line_three.html?current=four&amp;sub=e">Lemonade</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

</div>

(CSS)

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* for this demo only */
#nav {margin:20px 0 80px 0;}

/* the styling */
#nav {float:left; width:750px; height:auto; background:#fff url("dropline/bottom_line.gif") repeat-x bottom; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none; display:block;}

#nav li {display:inline; margin:0; padding:0;height:auto;}

#nav .select a,
#nav .current a {display:block; height:21px; float:left; background: url("dropline/left_blue.gif") no-repeat left top; padding:0 0 0 3px; border-bottom:1px solid #000; text-decoration:none; font-size:10px; line-height:20px; white-space:nowrap; margin-left:2px;}
* html #nav .select a, * html #nav .current a {width:1px;}

#nav .select a b, 
#nav .current a b {height:100%; display:block; background:url("dropline/right_blue.gif") no-repeat right top; padding:0 6px 0 3px; color:#000;}

#nav .select a:hover, 
#nav .select li:hover a {background-position:0 -75px; border-color:#046; cursor:pointer;}

#nav .select a:hover b, 
#nav .select li:hover a b {background-position:100% -75px; border-color:#046; color:#fff;}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:11px;}

#nav .current a {background-position:0 -75px; border-color:#046;}
#nav .current a b {background-position:100% -75px; color:#ff6;}

#nav .sub li a:hover, 
#nav .select a:hover .sub li a:hover, 
#nav .select li:hover .sub li a:hover {background:#005984 url(dropline/sub_sep.gif) top right no-repeat; color:#fff; text-decoration:underline;}

#nav .sub_active .current_sub a, 
#nav .sub_active a:hover {background:#005984 url(dropline/sub_sep.gif) top right no-repeat; color:#ff6; text-decoration:underline;}

#nav .select li a:hover .sub, 
#nav .select li:hover .sub {display:block; position:absolute; width:750px; top:21px; left:0; background:#005984; margin-top:1px; padding:0; z-index:100; border-bottom:20px solid #fff;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
#nav .sub_active {display:block; position:absolute; width:750px; top:21px; left:0; background:#005984; margin-top:1px; padding:0; z-index:10; color:#000; border-bottom:20px solid #fff;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}

#nav .sub_active a {height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal;}
#nav .sub_active a, 
#nav .select a:hover .sub li a, 
#nav .select li:hover .sub li a {display:inline; background:#005984 url(dropline/sub_sep.gif) top right no-repeat; padding:0 10px; margin:0; font-size:10px; width:auto; white-space:nowrap; font-weight:normal; border:0; color:#fff; height:25px; line-height:24px; }
</style>

Ingen? :(

Förstår inte riktigt vad du vill ha. Vill du markera den sidan som besökaren är på eller vad vill du göra. Samt har du en länk till hur det ser ut ?

Ja, vill markera den sida som besökaren är på. I menyn sätts två klasser för att markera detta, class="current" och class="sub_active"... dessa hade varit lätta att ändra med php men hur gör jag för att lyckas med detta i JS?

för "top" menyn:

function test(e) {
	var ul = document.getElementById("nav").getElementsByTagName("ul");
	for(var i=0;i<ul.length;i++)
	{
		ul[i].className="select";
	}
	var li = (e.target||e.srcElement).parentNode.parentNode;
	li.className = "current";
}

<div id="nav">
	<ul>
		<li><a href="#" onclick="test(event)">hej</a></li>
		<li><a href="#" onclick="test(event)">hej</a></li>
	</ul>
	<ul>
		<li><a href="#" onclick="test(event)">hej</a></li>
		<li><a href="#" onclick="test(event)">hej</a></li>
	</ul>
</div>