Question

我遇到一个小jQuery的问题，并认为社区中有人可以帮助我吗？所以，我的标记如下：

<div class="left">
    <ul id="editing-nav">
        <li><a class="active testforso" href="#TestForSO">Test For SO</a></li>
        <li><a class="testforso2" href="#TestForSO2">Test For SO2</a></li>
        ...and so on.
    </ul>
</div>

<div class="scroll">
    <div class="scrollContainer">
        <div id="testforso">
            ...some content
        </div>
        <div id="testforso2">
            ...some content
        </div>
        ...and so on.
    </div>
</div>

所以，基本上 - .left向左浮动，而.scroll在右侧。我正在寻找一种方式，所以主动导航元素（默认情况下，第一个，然后当用户点击另一个时，它将为该元素分配一个“.active”类并删除前一个的活动类）共同主持的div有一个显示：block，而其他所有人都隐藏。我在fancybox中做这个，这让它变得有点复杂，但这就是我现在所拥有的 -

$('#editing-nav li > a').click(function() {
        $('#editing-nav li > a').removeClass('active');
        $(this).addClass('active');
        activeClassID = $(this).attr('class');  // grabs the nav class for the id to show in .scroll
        var divIDToShow = ('.scroll .scrollContainer #') + activeClassID;       // grabs the DOM path & ID of the coinciding div to show
            divIDToShow = divIDToShow.replace(' active', ''); // removes " active" from the class (because before it would have a class of "testforso2 active"; now it just has "testforso".
        $('.scrollContainer div:not(#' + divIDToShow + ')').hide();
        $('.scrollContainer #' + divIDToShow ).show();
    });

这适用于有人点击的第一个链接，但不适用于此之后。我不知道我之前是否清楚，但是＃editing-nav li的课程与.scroll里面显示的div一起合作。

有什么想法吗？我不确定为什么这样做......谢谢！

Answer 1

此问题与您的ID选择器有关 - 请尝试使用this

修改

在这里找出真正的问题 - 不确定它为什么第一次有效但你的divIDToShow变量包含太多信息。见here for a cut down version

Answer 2

之所以这样做，可能是因为它在第一次点击时遇到了错误。 'active testforso'.replace(' active')评估为'active testforso'，因为字符串中没有' active'。即使您解决了这个问题，也不知道“活动”是在前面还是在类字符串的后面。您可以改为.replace(/\s*active\s*/, '')，但下面的示例只删除所有空格。

我认为您可能会将代码更改为：

$('#editing-nav li > a').click(function() {
    $('#editing-nav li > a:active').removeClass('active');
    $(this).addClass('active');
    activeClassID = $(this).attr('class');  // grabs the nav class for the id to show in .scroll
    var divIDToShow = activeClassID;       // grabs the DOM path & ID of the coinciding div to show
    divIDToShow = divIDToShow.replace('active', '').replace(/\s+/g,''); // removes "active" from the class then remove all spaces in what's left - "testforso2 active"; now it just has "testforso".
    $('.scrollContainer div:not(#' + divIDToShow + ')').hide();
    $('#' + divIDToShow ).show();
});

BUT：

您可能希望使用允许您通过哈希跟踪状态的jQuery-BBQ plugin，而不是执行所有这些操作。因此，您可以检测哈希中的更改，例如，使用哈希作为ID本身。

jQuery没有做我想做的事

2 个答案:

BUT：