Question

I have two submenus which I hightlight them when they are active with this jquery code:

<script type="text/javascript">
$(document).ready(function(){
    $('#links').click(function(){
        $(this).addClass('selected');
        $(this).siblings().removeClass('selected');
    });
})
 </script>

but now I have another submenu which I want to use the same code but it doesnt work because the siblings() function wont work in it because the links are under li tag! and here is the code I tried for it:

<script type="text/javascript">
$(document).ready(function(){
    $('.tabs_rubriken  a').click(function(){
        $(this).addClass('selected');
        $(this).siblings().removeClass('selected');
    });
})
 </script>

and when I click on them they get hightlighed but they wont remove the class ‘selected’ when other link is clicked in that menu. by the way this menu must be ordered with ul li.

THe markup:

<div id="tab2">
<ul class="tabs_rubriken">
    <li><a class="submenu_produkts_links2" href="#armreifen">Armreifen</a></li>
    <li><a class="submenu_produkts_links2" href="#colliers">Colliers Anhänger</a></li>
    <li><a class="submenu_produkts_links2" href="#ohrschmuck">Ohrschmuck</a></li>
    <li><a class="submenu_produkts_links2" href="#ringe">Ringe</a></li>
</ul>
<div id="armreifen">[tabs slidertype="images" auto="yes" autospeed="4000"]
[imagetab width="800" height="500"] image.png [/imagetab]
[imagetab width="800" height="500"] image.png [/imagetab]
[/tabs]</div>
<div id="colliers">Colliers Anhänger</div>
<div id="ohrschmuck">Ohrschmuck</div>
<div id="ringe">Ringe</div>
</div>

Answer 1

$(document).ready(function(){
    $('.tabs_rubriken a').click(function(){
        $('a.selected', this.parentElement.parentElement).removeClass('selected');
        $(this).addClass('selected');
    });
})