javascript - 突出显示所有级别的事件菜单链接按钮

Question

我正在处理一些包含很多内容的表格，我正在努力实现以下目标: 我有 3 个按钮级别的表:

第一级:

• 男性
• 女性
• children

第二层:

• 衣服
• 鞋子

第三层:

• 品牌 1
• 品牌 2

...等等

目前我正在使用这个

`<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

方法一:一键点击功能

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

方法二:每个级别带点击功能，

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');
});