突出显示所有级别的活动菜单链接按钮

Question

我正在制作一些包含大量内容的表格，我正在努力实现以下目标： 我有3个级别的按钮表：

第一级：

• 男性
• 女性
• 儿童

第二级：

• 衣服
• 鞋

第3级：

• Brand1
• Brand2

...等

当然我正在使用这个

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

结合此javascript

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

通过更改背景颜色突出显示一个按钮。我需要做的是当我点击level1按钮然后是level2按钮和最终level3时，所有按钮都会保持高亮显示，以显示我现在在桌子上看的位置。

是否有任何javascript或php或插件来瞄准这个？ 非常感谢你！

Answer 1

方法1：只需一次点击功能

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

方法2：使用每个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

您是否希望<td>在点击时更改颜色？如果是这样，那就像：

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

可以做到这一点。或者你想要别的什么？