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

Question

我正在处理一些包含很多内容的表格，我正在尝试执行以下操作： 我有 3 级按钮的表格：

第一级：

• 男士
• 女性
• 儿童

第二级：

• 衣服
• 鞋子

第三级：

• 品牌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

方法二：每个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>

可以解决问题。还是你想要别的东西？