Как мне изменить содержимое вкладки с помощью jQuery?

Question

Я использую jQuery для отображения контента в трех отдельных видах. Однако я могу получить только первое (по умолчанию) представление. Примечание. Это не использует пользовательский интерфейс jQuery.

Вот ссылка на page (все еще очень много в dev).

Вот HTML:

<div id="tabbed_area"> 
      <ul class="tabs"> 
       <li><a id="services" class="tab active" href="#">Services</a></li> 
       <li><a id="supplies" class="tab" href="#">Supplies</a></li> 
       <li><a id="diy" class="tab" href="#">DIY</a></li> 
      </ul> 
      <br class="clearer" /> 
       <div id="services-content" class="content"> 
        <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p> 
        <h3>This is the main headline</h3> 
        <h4>Headline Goes Here</h4> 
        <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p> 
       </div> 
       <div id="supplies-content" class="content"> 
        <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p> 
        <h3>This is the main headline</h3> 
        <h4>Headline Goes Here</h4> 
        <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p> 
       </div> 
       <div id="diy-content" class="content"> 
        <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p> 
        <h3>This is the main headline</h3> 
        <h4>Headline Goes Here</h4> 
        <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p> 
       </div> 
     </div> 

Вот CSS:

#mainContent #tabbed_area   { padding: 0 20px; position: relative; z-index: 50; } 
ul.tabs     { margin: 0px; padding: 0px; } 
ul.tabs li     { list-style: none; float: left; display: inline; } 
ul.tabs li a#services   { 
         width: 113px; 
         height: 36px; 
         display: block; 
         text-indent: -9999px; 
         border: none; 
         background: url(../_images/btn_services.png) no-repeat center top; } 
ul.tabs li a#supplies    { 
         width: 113px; 
         height: 36px; 
         display: block; 
         text-indent: -9999px; 
         border: none; 
         background: url(../_images/btn_supplies.png) no-repeat center bottom; }         
ul.tabs li a#diy     { 
         width: 113px; 
         height: 36px; 
         display: block; 
         text-indent: -9999px; 
         border: none; 
         background: url(../_images/btn_diy.png) no-repeat center bottom; } 

ul.tabs li a#services:hover, 
ul.tabs li a#supplies:hover, 
ul.tabs li a#diy:hover { background-position: center center; }         

#supplies-content, #diy-content { display: none; } 

И, наконец, вот JQuery:

<script type="text/javascript"> 
$(document).ready(function() { 
$("a.tab").click(function(){ 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
    $(.content).slideUp(); 

    var content_show = $(this).attr("title"); 
    $("#"+content_show).slideDown(); 
    }); 
}); 
</script> 

Answer 1

Эта линия:

$(.content).slideUp(); 

должно быть:

$(".content").slideUp(); 

И это:

var content_show = $(this).attr("title"); 

должно быть:

var content_show = $(this).attr("id"); 

... так как ваш не имеет атрибут заголовка, но ID делает Кажется, вы хотите, чтобы вы захотели.

И поскольку в области содержимого есть идентификатор, заканчивающийся на «-content», вам необходимо добавить его к ID от content_show.

$("#" + content_show + '-content').slideDown(); 

Кроме того, я предполагаю, что поведение по умолчанию <a> элемента обновления страницы при нажатии кнопки.

Вы должны предотвратить поведение по умолчанию <a> при нажатии кнопки с помощью event.preventDefault()

$("a.tab").click(function(evt) { 
    // Prevents the default behavior of the <a> from occurring 
    evt.preventDefault(); 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
    var content_show = $(this).attr("id"); 
     // only slide up the visible content 
    $(".content:visible").slideUp(); 
     // you need to append '-content' to the ID to make 
     // match the proper content area 
    $("#" + content_show + '-content').slideDown(); 

});​ 

• http://api.jquery.com/event.preventDefault/