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

【问题标题】：Customize active tab with jquery / javascript使用 jquery / javascript 自定义活动选项卡
【发布时间】：2011-12-01 11:50:55
【问题描述】：

我正在尝试修改此页面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";
}

...它可以工作，但是当我转到其他选项卡时，在过去的选项卡中选择的选项仍然处于活动状态！如何停用其他的并仅在我所在的位置设置活动？

【问题讨论】：

标签： javascript jquery tabs customization

【解决方案1】：

请看一下简化的 sn-p HERE。

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

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

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

【讨论】：

为什么不只是 removeClass() 和 addClass() 类？ $("ul.menu li").click(function() { $(this).siblings("selected").removeClass("selected"); $(this).addClass("selected"); }); $("li.selected") 也会影响其他菜单。
感谢 dzejkej 和 Stefan！我尝试将该脚本放入我自己的脚本中，并用“ul.mymenuclass li”更改“ul.menu li”，但仍然无法正常工作......也许我不明白我必须把它放在哪里？我把你的脚本放在“break;”之后……错了吗？抱歉，我是新手！
@Andrea：确保您的页面有可用的 jQuery。我的示例代码应该只在页面渲染后执行一次。您可以将您的 js 文件或 body 元素放入并使用$(function() { /** PUT IT HERE */ });，这样它就会在文档准备好时执行（参见this）。
@Andrea：如果您仍然遇到问题，请使用jsbin.com 或jsfiddle.net，将相关部分放在那里（html、js）并尝试评论您的代码。
好的，伙计们！我尝试了很多次，但仍然是同样的问题！无论如何，我结合使用 css 和 js 技巧来解决。非常感谢您的关注/耐心！