PDA

View Full Version : Help with some simple scripts



guidoo
03-30-2009, 10:35 AM
Dear all,

I'm working on a website with some css-javascript combination menu. Ive got it working and all but the code is horrible.

the situation:

- the website is composed of sections each with an anchor <div id="bla">
- there is one main menu, navigating to the anchor accordingly
- there is another menu (in a different form) with the same buttons, also navigating to the anchor accordingly.

what I want:
- when you click on an item in the main menu, the menu button gets the css class 'selected'
- at the same time, in the second menu, the same menu item gets the css class 'selected'

what I have so far:

javascript

// main menu

$('a.item1').click(function () {
$('a').removeClass('selected');
$('a. item1').addClass('selected');
$('a.s-item1').addClass('selected');
});

$('a.item2').click(function () {
$('a').removeClass('selected');
$('a. item2').addClass('selected');
$('a.s-item2').addClass('selected');
});


// second menu

$('a.s-item1').click(function () {
$('a').removeClass('selected');
$('a. item1').addClass('selected');
$('a.s-item1').addClass('selected');
});

$('a.s-item2').click(function () {
$('a').removeClass('selected');
$('a. item2').addClass('selected');
$('a.s-item2').addClass('selected');
});

html looks like this

<div id="navigation">
<ul>
<li><a class="item1" href="#item1">item1</a></li>
<li><a class="item2" href="#item2">item2</a></li>
</ul>
</div>
<div id="content">
<div id="item1">
</div>
<div id="item2">
</div>
</div>
<div id="navigation-small">
<ul>
<li><a class="s-item1" href="#item1">item1</a></li>
<li><a class="s-item2" href="#item2">item2 </a></li>
</ul>
</div>

please help!

- this example has got 2 items. in fact i have 30 items in the site so it needs some optimizing, a nice function.
- I was thinking about some function that gets the current anchor and stores it, and then somehow assigns the selected state to anchor and 's-'anchor
- Somehow, Javascript needs to know what link the user clicks on (like #item1), and then it needs to assign 'selected' to all <a class="item1"> and <a class="s-item1">, plus remove all other selected states.



I can't figure it out. But I want the code to be neat and compact. Thanks so much!

Guido