Показать и скрыть вкладки

Question

Я пытаюсь получить основное приложение вкладки jQuery. Я бы хотел, чтобы вкладки отображались только при нажатии ссылки. После примера jQuery here я могу получить вкладки, которые не обнаруживают проблем на моем локальном хосте, но как только я ввожу ссылку на страницу, вкладки больше не отображаются, и вместо этого отображается содержимое базовой вкладки.

Просматривая Stackoverflow Я вижу ответы, предполагающие использование метода скрыть(), но я не знаю:

• если это способ сделать это - то есть создавать вкладки на странице загрузки, то скрыть их?

• ли я использовал его правильно?

• Возможно ли иметь кнопку закрытия в группе вкладок (т. Е. Нажмите кнопку, и все вкладки исчезнут)?

My jsFiddle is 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 попробовать Tabbable СЧА из

Bootstrap Nav

Было бы намного лучше и легче.