Highlight all levels of active menu link button

Question

I am working on some table with much content I am trying do aim the following: I have table with 3 levels of buttons:

1st level:

• Men
• Women
• Children

2nd level:

• Clothes
• Shoes

3rd level:

• Brand1
• Brand2

...etc

Curently I am using this

`<td colspan="2"><a class="linkButton level1" href="#">Women</a></td>`

combined with this javascript

<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
$(".linkButton").click( function() {
    $(".linkButton").parent().removeClass("activeClass");
    $(this).parent().addClass("activeClass");
});
});//]]>  

To highlight one button by changing his background color. What I need to do is When I click on level1 button then level2 button and finaly level3, all buttons stay highlighted to show excatly where I am now looking in the table.

Is there any javascript or php or plugin to aim this ? Thank you very much!

Answer 1

Method 1: with one click function

var menuArray = ["level1","level2","level3"];
$(".linkButton").click(function () {    
    for (var i = 0; i < menuArray.length; i++) {
        if ($(this).hasClass(menuArray[i])){
            $('.'+menuArray[i]).parent().removeClass("activeClass");
            $(this).parent().addClass("activeClass");
            break;
        }
    }      
});

jsfiddle demo

Method 2: with click function for each level,

function changecolor($curbut,lev){
    $(lev).parent().removeClass("activeClass");
    $curbut.parent().addClass("activeClass");
}
$(".level1").click( function() {        
    changecolor($(this),'.level1');
});
$(".level2").click( function() {
    changecolor($(this),'.level2');
});
$(".level3").click( function() {
    changecolor($(this),'.level3');
});

Answer 2

Are you wanting the <td> to change colour when you click on it? If so, something simple like:

<table><tr><td onclick="this.style.backgroundColor = '#678'; ">Click to change color</td></tr></table>

Can do the trick. Or are you wanting something else?