使用jQuery / JavaScript自定义活动标签

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

请在此处查看简化的代码段。

当您包含jQuery标签时，我使用了jQuery。

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

每个菜单项都会有一个单击处理程序，该处理程序将检查类“ selected”是否具有同级并删除该类。 之后，他将把当前菜单项的类别设置为“选定”。