JQuery скрыть / показать / переключить / пусто

0

Я не могу заставить этот jQuery работать. У меня есть абзац внутри div. Когда щелкает вкладку div/, я хочу, чтобы она скрывала() абзац. Когда нажата противоположная вкладка/кнопка div, я хочу показать() ее.

http://jsfiddle.net/Sketchs/FB28D/2/

$("#details").on("click", function () {
    $(".cont").hide();
    $("#content").text("some text");
});
$("#description").on("click", function () {
    $("#content").empty();
    $("p.cont").show();
});

});

Теги:

3 ответа

1
Лучший ответ

Возможно, вам будет проще использовать плагин JQuery для этого, а не писать код самостоятельно.

JQuery UI отлично подходит для такого рода вещей, см. Раздел вкладки здесь:

http://jqueryui.com/tabs/

так как вы только хотите его для вкладок, вы можете получить его пользовательскую загрузку здесь, что уменьшит количество загружаемого вами кода на странице:

http://jqueryui.com/download/#!version=1.10.3&components=1100000000000000001000000000000000

Поделиться
0

Если вы решите написать свой собственный скрипт вкладки, есть много способов решить проблему даже с помощью JQuery. Здесь один из способов:

(http://jsfiddle.net/ruqmU/5/)

CSS

.tab {
    float:left;
    display:inline-block;
    border:1px solid #000;
    padding:.5em;
}
#contentArea {
    border: 1px solid #000;
    padding:.5em;
    clear: both;
}
.block {display:block;}
.hide {display:none;}
.selectedTab {background-color:red;}

Javascript (JQuery)

$(document).ready(function() {
    // default first tab to visible
    $('.content').addClass('hide');
    $('.content').first().removeClass('hide').addClass('block');
    $('.tab').first().addClass('selectedTab');

    // on click, hide all content except content matching the clicked tab
    $('.tab').click(function() {
        if(!$(this).hasClass('selectedTab')) {
            var tabContentType = $(this).children('p').attr('class');
            $('.tab').removeClass('selectedTab');
            $(this).addClass('selectedTab');
            $('div.content').addClass('hide');
            $( '.' + tabContentType ).parent().removeClass('hide').addClass('block');
        }
    });
});

HTML

<div id="tabArea">
    <div class="tab">
        <p class="details">details</p>
    </div>
    <div class="tab">
        <p class="description">description</p>
    </div>
</div>
<div id="contentArea">
    <div class="content">
        <p class="details">details go here</p>
    </div>
    <div class="content">
        <p class="description">description goes here</p>
    </div>
</div>
Поделиться
  • 0
    Благодарю. Я выбрал более уродливый способ сделать это. Я сделал 2 абзаца. Спрятал один под нагрузкой. Затем просто поменяйте местами спрятать / показать для каждой кнопки. Очень некрасиво.
  • 0
    Здорово. Выше тоже не очень красиво.
0

Вы ничего не видите, потому что вы #content div #content а затем пытаетесь показать его дочерний #content:

$("#content").empty();

Вычистите что-нибудь внутри селектора. Поэтому быстрый console.log($("p.cont").length) равен 0, так как вы очистили его. Просто измените текст или не пустите его.

Поделиться
  • 0
    Я удалил пустую команду, и она все еще не возвращает P
  • 1
    @ user3058518 Вы также заменяете p на «некоторый текст» в вашем другом обработчике jsfiddle.net/FB28D/4

Ещё вопросы

Сообщество Overcoder
Наверх
Меню