Question

我是创建标签的新手。我正在跟随这里的t 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

单击其他选项卡时不显示选项卡内容

3 个答案: