0

我是创建标签的新手。我正在关注这里的教程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();  

});

谁能找到问题？

4

3 回答 3

0

您也可以使用Tabs简单地尝试一下：

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

在这里演示

于 2013-04-18T11:49:35.470 回答
0

教程是说你在列表中添加一个标题属性，否则你的 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>
于 2013-04-18T11:43:39.230 回答
0

尝试将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
于 2013-04-18T11:44:51.353 回答