jQuery hide/show/toggle/empty

Question

Я не могу заставить этот 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(); 
}); 

});

Answer 1

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

JQuery UI является блестящим для такого рода вещи, смотрите раздел вкладки здесь:

http://jqueryui.com/tabs/

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

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

Answer 2

Ты ничего не видел, потому что вы Слив #content DIV, а затем пытается показать его ребенку:

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

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

Answer 3

Если вы в конечном итоге, решивших написать свой собственный сценарий вкладки, есть много способов решить эту проблему даже с 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>