вкладки не отображаются при нажатии других вкладок

Question

Я новичок в создании tabs.I я после в turtorial здесь http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/

Проблемы с моими закладками, когда я нажимаю на следующую вкладку, все содержание ушло

Вот мой html;

<div class="tabbed_area"> 
    <ul class="tabs"> 
     <li><a href="#" id="tab1" class="tab active">Articles</a></li> 
     <li><a href="#" id="tab2" class="tab">Videos</a></li> 
     <li><a href="#" id="tab3" class="tab">Exclusive</a></li> 
    </ul> 

     <div id="content1" class="content" ><p>This is Tab 1</p></div> 
     <div id="content2" class="content" ><p>This is Tab 2</p></div> 
     <div id="content3" class="content" ><p>This is Tab 3</p></div> 

</div> 

и JQuery находится здесь;

$("a.tab").click(function() { 

    // switch all tabs off 
    $(".active").removeClass("active"); 

    // switch this tab on 
    $(this).addClass("active"); 

    // slide all elements with the class 'content' up 
    $(".content").slideUp(); 

    // Now figure out what the 'title' attribute value is and find the element with that id. Then slide that down. 
    var content_show = $(this).attr("title"); 
    $("#"+content_show).slideDown(); 

}); 

может кто угодно найти проблему?

Answer 1

Учебное пособие говорит вам добавить в список атрибут title, иначе ваш JavaScript не будет иметь ничего общего с изменением вкладки. Он должен иметь что-то, чтобы определить, какой div-контент вы хотите открыть.

<ul class="tabs"> 
    <li><a href="#" title="content_1" class="tab active">Topics</a></li> 
    <li><a href="#" title="content_2" class="tab">Archives</a></li> 
    <li><a href="#" title="content_3" class="tab">Pages</a></li> 
</ul> 

Answer 2

Попробуйте положить title собственности на <a> якорей:

<ul class="tabs"> 
    <li><a href="#" title='content1' id="tab1" class="tab active">Articles</a></li> 
    <li><a href="#" title='content2' id="tab2" class="tab">Videos</a></li> 
    <li><a href="#" title='content3' id="tab3" class="tab">Exclusive</a></li> 
</ul>//-----------^^^^^^^^^^^^^^^------these titles are important to put 

Answer 3

Вы также можете попробовать это просто, используя Tabs:

$("#tabs").tabs({ fx: { height: 'toggle', duration: 500 } }); 

DEMO HERE