顯示和隱藏標籤

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這將是更好更簡單。