Как я могу отделить эти div в javascript?

Question

Как я могу отделить эти div в javascript?

0

У меня есть этот скрипт прокрутки 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-div. http://jsfiddle.net/9SfEH/5/

То, что я хочу изменить, заключается в том, что я отделяю "вкладки" от основного div-div tab, но заставляю их по-прежнему управлять "элементами". http://jsfiddle.net/w65Dn/1/

Я пытался создать простое решение, и я не мог придумать один. Спасибо всем заранее :)

Szandra05 04 дек. 2013, в 17:35

Источник

0

Что-то вроде этого? jsfiddle.net/w65Dn/2
Xymostech 04 дек. 2013, в 16:04

Теги:

javascript

jquery

html

css

3 ответа

0

В строке 7 измените селектор на это.tabs

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

как показано здесь: пример jsfiddle

jarz 04 дек. 2013, в 13:31

0

Вы искали .tabs внутри tab-box которая не существует. Итак, как насчет создания div вне .tab который также включает 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');
    });

});

javaCity 04 дек. 2013, в 13:18

Ещё вопросы

Xymostech · Accepted Answer · 2013-12-04T13-54-00.000Z

Проблема заключалась в том, что в исходном коде он искал вкладку clickables с помощью $(this).find(".tab"), но .tab больше не были внутри .tab-box. Итак, если вы просто ищете глобально, с $(".tab"), он работает.

Обратите внимание, что вы больше не можете иметь более одного поля вкладки, потому что оно ищет глобально для .tab s. Вы можете использовать что-то вроде решения javaCity (т.е. обернуть все в другом div), чтобы исправить это.