Не выводится вложенный div в вкладке на странице через js

Question

html разметка:

                <ul id="tabs">
                    <li><a href="#" title="tab1">Описание</a></li>
                    <li><a href="#" title="tab2">Характеристики</a></li>
                    <li><a href="#" title="tab3">ТУ</a></li>
                    <li><a href="#" title="tab4">Индивидуальный заказ</a></li> 
                </ul>
                <div id="content">
                    <div id="tab1">
                    Данная вкладка сделана для описания товара
                    </div>
                    <div id="tab2">
                    Данная вкладка сделана для описания характеристик товара
                    </div>
                    <div id="tab3">
                    Данная вкладка сделана для описания ТУ
                    </div>
                    <div id="tab4">
                       <p>Текст сверху</p>
                        <div>
                          Элемент по середине
                        </div>
                        <p>Текст снизу</p>

                    </div>
                </div>

код на js:

$(document).ready(function() {
    $("#content div").hide(); 
    $("#tabs li:first").attr("id","current"); 
    $("#content div:first").fadeIn(); 
    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#content div").hide(); 
        $("#tabs li").attr("id",""); 
        $(this).parent().attr("id","current"); 
        $('#' + $(this).attr('title')).fadeIn(); 
    });
});

При запуске кода не отображаются вложенные div (в данном случае "Элемент по середине") Как можно исправить?

Answer 1

Согласно твоему коду на JQUERY:

$("#content div").hide();

Ты скрываешь все (style="display:none") divs которые находятся в #content кроме div с id который нужен. Вот !примерно! должно быть как-то так.

P.S. ты можешь изменить class на id

HTML

                <ul id="tabs">
                <li><a href="#" title="tab1">Описание</a></li>
                <li><a href="#" title="tab2">Характеристики</a></li>
                <li><a href="#" title="tab3">ТУ</a></li>
                <li><a href="#" title="tab4">Индивидуальный заказ</a></li> 
            </ul>
            <div id="content">
                <div id="tab1">
                Данная вкладка сделана для описания товара
                </div>
                <div id="tab2">
                Данная вкладка сделана для описания характеристик товара
                </div>
                <div id="tab3">
                Данная вкладка сделана для описания ТУ
                </div>
                <div id="tab4">
                   <p>Текст сверху</p>
                    //добавляем класс который не скрывать
                    <div class="not_hidden">
                      Элемент по середине
                    </div>
                    <p>Текст снизу</p>

                </div>
            </div>

Jquery:

    $(document).ready(function() {
    //не скрываем DIV, который тебе нужен
    $("#content div:not(.not_hidden)").hide(); 
    $("#tabs li:first").attr("id","current"); 
    $("#content div:first").fadeIn(); 
    $('#tabs a').click(function(e) {
        e.preventDefault(); 
        //не скрываем аналогично       
        $("#content div:not(.not_hidden)").hide(); 
        $("#tabs li").attr("id",""); 
        $(this).parent().attr("id","current"); 
        $('#' + $(this).attr('title')).fadeIn(); 
    });
});

Пруф: link

БЛОГ НА HUSL

Не выводится вложенный div в вкладке на странице через js

Ответы (1 шт):