1

我正在处理一些内容很多的表格，我正在尝试以下目标：我有一个带有 3 级按钮的表格：

第一级：

  • 男士
  • 女性
  • 孩子们

2级：

  • 衣服
  • 鞋

第三级：

  • 品牌1
  • 品牌2

...ETC

目前我正在使用这个

`<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 或插件来瞄准这个？非常感谢！

4

2 回答 2

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 演示

方法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');
});
于 2013-11-05T01:00:04.013 回答
0

你想<td>点击它时改变颜色吗？如果是这样，那么简单的事情就是：

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

可以做的伎俩。还是你想要别的东西？

于 2013-11-05T00:39:57.440 回答