Question

我有这个div滚动脚本：

$(document).ready(function () {
$('.tab-box').each(function () {
    var top = 0;
    var $tabbox = $(this);
    var height = $tabbox.height();

    $(this).find('.tab').each(function () {
        var shift = top;

        $(this).click(function () {
            $tabbox.find('.items').animate({
                marginTop: shift + 'px'
            });
            $tabbox.find('.tab').removeClass('active');
            $(this).addClass('active');
        });

        top -= height;
    });

    $(this).find('.tab:eq(0)').addClass('active');
});

});

如果我理解正确，它会使每个div只在div“tab-box”中工作。 http://jsfiddle.net/9SfEH/5/

我想要改变的是我将“标签”与主标签框div分开，但让它们仍然可以控制“项目”。 http://jsfiddle.net/w65Dn/1/

我正在尝试一个简单的解决方案buuut不能自己想出一个。提前谢谢大家：）

Answer 1

在第7行，将选择器从此更改为.tabs

$(this).find('.tab') becomes $(.tabs).find('.tab')

如此处所示：jsfiddle example

Answer 2

问题在于，在原始代码中，它正在使用$(this).find(".tab")查找标签可点击内容，但.tab不再位于.tab-box内。因此，如果您只使用$(".tab")进行全局搜索，则可以使用。

请注意，您不能再拥有多个标签框，因为它正在全局搜索.tab。您可以使用类似javaCity的解决方案（即将所有内容包装在另一个div中）来解决此问题。

Answer 3

您在.tabs内找不到tab-box。那么如何创建一个.tab之外的div，它还包含tab-box？

http://jsfiddle.net/3D8we/

HTML：

<div class="enclosingDiv">
    <div class="tabs">
        <div class="tab">1</div>
        <div class="tab">2</div>
        <div class="tab">3</div>
    </div>
    <div class="tab-box">
        <div class="items">
            <div class="item" style="background: #cbe86b;"></div>
            <div class="item" style="background: #f2e9e1;"></div>
            <div class="item" style="background: #1c140d;"> </div>
        </div>
    </div>
</div>

JS：

$(document).ready(function () {
    $('.tab-box').each(function () {
        var top = 0;
        var $tabbox = $(this);
        var height = $tabbox.height();

        $('.enclosingDiv').find('.tab').each(function () {
            var shift = top;

            $(this).click(function () {
                $tabbox.find('.items').animate({
                    marginTop: shift + 'px'
                });
                $tabbox.find('.tab').removeClass('active');
                $(this).addClass('active');
            });

            top -= height;
        });

        $(this).find('.tab:eq(0)').addClass('active');
    });

});

如何在javascript中分隔这些div？

3 个答案: