javascript - 两个(独立的)jQuery Tab 插件杀死了我的代码

Question

我正在开发一个非常大的页面，其中包含大量内容和一些叠加层以及各种复杂的内容。我将省去您所有的代码，只包含相关的部分。

本质上，我有一些侧边栏按钮，可以根据单击的按钮打开叠加层。 HTML 如下:

<div class="sideBtn sidebarOverlay" data-linkto="overlayMyInvoices">
    <img src="icons/icon_invoice.svg" alt=""><h2>Invoices</h2>
</div>

<div id="overlayMyInvoices" class="overlay">
</div>

这里是一些 Javascript:

$(sideBtns).click(function(index){

    var newId = "#" + (($(this).data("linkto")).toString());
    var newOverlay = $(newId);

});

(我遗漏了很多 Javascript，正如我所说，我只包含相关位。那个“toString”可能不是必需的，我不完全确定我已经把它放在那里了，但我非常怀疑这就是问题所在。)

在添加 jQuery 选项卡插件之前，此代码工作正常。

现在，在这些覆盖层之一中，我需要一些“选项卡式”内容 - 因此我下载了三个单独的 jQuery 选项卡插件，并且所有三个插件都产生了相同的错误。在这种特殊情况下，我使用的是 Tabslet 。首先，这是选项卡区域的 HTML:

<div id="overlayMyInvoices" class="overlay">
    <div class='tabs'>
        <ul class='horizontal'>
            <li><a href="#tab-1">Tab 1</a></li>
            <li><a href="#tab-2">Tab 2</a></li>
            <li><a href="#tab-3">Tab 3</a></li>
        </ul>
        <div id='tab-1'></div>
        <div id='tab-2'></div>
        <div id='tab-3'></div>
    </div><!-- tabs -->
</div>

这是 Javascript:

$('.tabs').tabslet();

出于某种原因，我使用的每个 jQuery 选项卡插件都会产生相同的错误(我还使用了 jQuery 的 UI 核心插件和 EasyTabs )。当我尝试使用侧边栏按钮打开任何叠加层时，叠加层不会出现，并且出现此控制台错误:

Uncaught TypeError: Cannot read property 'toString' of undefined

也许这个错误最奇怪的部分是它只出现一次。第一个错误之后的任何后续点击都可以正常工作。

我只是不明白这些插件如何导致出现此错误。 jQuery之前可以读取自定义数据字段，怎么突然不能了？如果我不调用该插件，它会再次工作。

我意识到这是一个非常漫长且复杂的问题，但如果有人知道这个问题是什么以及如何解决它，我将非常感激!

Answer 1

对于仍然关心的人，我发现了这个问题。我写了一些极其愚蠢的 Javascript 来寻找“active”类。任何具有非特定类“active”的元素。关于“主动”的事？这是一个很多开发人员都使用的很棒的词。我的代码和插件都使用“active”，而我的Javascript，因为它只是在页面上的任何地方寻找“active”，所以很糟糕。所以我自己的错!很好。