Question

我正在尝试修改此页http://www.bluimage.it/dev/上垂直标签的脚本，在标签右侧放置一个箭头，因为我可以显示有效/选定的标签。我试着调用一个css类，如图所示（注意“case”left：“）：

    function showContentDesc(modid, ind, pos)
{
        i = 0;
        switch(pos)
        {
            case "top":
                thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderBottom;
                while (document.getElementById("content_" + modid + "_" + i) != null) {
                    document.getElementById("content_" + modid + "_" + i).style.display = "none";
                    document.getElementById("menu_" + modid + "_" + i).style.borderBottom = thisstyle;
                    i++;
                }
                document.getElementById("menu_" + modid + "_" + ind).style.borderBottom = "none";
                break;
            case "bottom":
                thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderTop;
                while (document.getElementById("content_" + modid + "_" + i) != null) {
                    document.getElementById("content_" + modid + "_" + i).style.display = "none";
                    document.getElementById("menu_" + modid + "_" + i).style.borderTop = thisstyle;
                    i++;
                }
                document.getElementById("menu_" + modid + "_" + ind).style.borderTop = "none";
                break;
            case "right":
                thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderLeft;
                while (document.getElementById("content_" + modid + "_" + i) != null) {
                    document.getElementById("content_" + modid + "_" + i).style.display = "none";
                    document.getElementById("menu_" + modid + "_" + i).style.borderLeft = thisstyle;
                    i++;
                }
                document.getElementById("menu_" + modid + "_" + ind).style.borderLeft = "none";
                break;
            case "left":
            default:
                thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderRight;
                while (document.getElementById("content_" + modid + "_" + i) != null) {
                    document.getElementById("content_" + modid + "_" + i).style.display = "none";
                    document.getElementById("menu_" + modid + "_" + i).style.borderRight = thisstyle;
                    i++;
                }
                document.getElementById("menu_" + modid + "_" + ind).className = "sliptabs-left-menuitem-container-active";
                break;
        }
        document.getElementById("content_" + modid + "_" + ind).style.display = "inline";
}

...它有效，但当我转到其他标签时，过去标签中的选定内容仍然有效！如何停用其他的并将其设置为仅在我所在的位置？

Answer 1

请查看简化的摘录HERE。

我使用了jQuery，因为你包含了一个jQuery标签。

$("ul.menu li").click(function() {
  $(this).siblings(".selected").removeClass("selected");
  $(this).addClass("selected");
});

每个菜单项都会有一个点击处理程序，用于检查“已选择”类的兄弟，并删除此类。之后，他将该类设置为当前菜单项的“选定”。

使用jquery / javascript自定义活动选项卡

1 个答案: