显示和隐藏标签

Question

我试图获得一个基本的jQuery标签解决方案工作。我希望选项卡仅在单击链接时呈现。继jQuery示例here之后，我可以在我的本地主机上看到显示没有问题的选项卡，但只要我引入页面链接，选项卡就不再呈现，而是显示底层的选项卡内容。

通过找＃1我看到的答案提示使用隐藏（）方法，但我不知道：

• ，如果这是这样做的方式 - 即创建页面加载的选项卡，然后 隐藏他们？

• 我是否正确使用它？

• 是否可以在选项卡组上有一个关闭按钮（即单击按钮并且所有选项卡消失）？

我的jsFiddle是here。

的Javascript：

$("#tabs").hide(); 
$("#link").click(function() { 
    $("#tabs").tabs(); 
}); 

HTML：

<a href="#" id="link">Link text</a> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">Tab 1</a></li> 
      <li><a href="#tabs-2">Tab 2</a></li> 
      <li><a href="#tabs-3">Tab 3</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <p>Tab 1 text.</p> 
     </div> 
     <div id="tabs-2"> 
      <p>Tab 2 text.</p> 
     </div> 
     <div id="tabs-3"> 
      <p>Tab 3 text.</p> 
     </div> 
    </div> 

Answer 1

$("tabs").show();创建选项卡后，因为你摆在首位隐藏它们。

请参阅此http://jsfiddle.net/wYKVy/2/以获取关闭选项卡的按钮。

Answer 2

你永远不会实例化选项卡。尝试：

$("#tabs").tabs().hide(); 
$("#link").click(function() { 
    $("#tabs").show(); 
}); 

jsFiddle example

请注意，你也可以这样做：

$("#tabs").hide(); 
$("#link").click(function() { 
    $("#tabs").tabs().show(); 
}); 

Answer 3

尝试了这一点： -

http://jsfiddle.net/adiioo7/wYKVy/3/

个JS： -

jQuery(function() { 

    $("#tabs").tabs(); 
    $("#ShowTabs").click(function() { 
     $("#tabs").show(); 
    }); 

    $("#HideTabs").click(function() { 
     $("#tabs").hide(); 
    }); 
}); 

HTML： -

<a href="#" id="ShowTabs">ShowTabs</a><br/> 
<a href="#" id="HideTabs">HideTabs</a> 

<div id="tabs" style="display:none;"> 
    <ul> 
     <li><a href="#tabs-1">Tab 1</a> 

     </li> 
     <li><a href="#tabs-2">Tab 2</a> 

     </li> 
     <li><a href="#tabs-3">Tab 3</a> 

     </li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1 text.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2 text.</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Tab 3 text.</p> 
    </div> 
</div> 

Answer 4

我会sugest从

Bootstrap Nav

尝试Tabbable NAV这将是更好更简单。