Создать вкладки с jquery

Question

Итак, я немного незнакомы с этим, я хотел бы знать лучший способ создания двух вкладок на этой странице («braga» и «lisboa» - это 2 вкладки):

http://www.iloja.pt/index.php?_a=viewDoc&docId=14

Я бы просто скрыть содержимое от первой вкладки, при выборе второй вкладки, появляется скрытый контент с шоу() и изменения свойств CSS кнопок, но я не думаю, что это это практический способ сделать это.

Пожалуйста, не могли бы вы указать мне правильное направление?

Спасибо большое, ребята!

Answer 1

Возможно, вы имели в виду http://jqueryui.com/demos/tabs/?

Выполняется точно так же, как описано выше. Есть много вариантов. Прочитайте также документацию.

Answer 2

В качестве примера мы можем сделать так.

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    </script> 



<div class="demo"> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">braga</a></li> 
     <li><a href="#tabs-2">lisboa</a></li> 

    </ul> 
    <div id="tabs-1"> 
     <p>braga</p> 
    </div> 
    <div id="tabs-2"> 
     <p>lisboa</p> 
    </div> 

</div> 

</div><!-- End demo --> 



<div style="display: none;" class="demo-description"> 
<p>Click tabs to swap between content that is broken into logical sections.</p> 
</div><!-- End demo-description --> 

Answer 3

использовать JQuery-UI-1.8.1.custom.min.js на вкладке

<div id="tabs" style="height: auto;"> 
    <ul> 
      <li><a href="#subtabs-1" onclick="GetTab1();return false;">Tab1</a></li> 
      <li><a href="#subtabs-2" onclick="GetTab2();return false;">Tab2</a></li> 

     </ul> 
<div id="subtabs-1" style="height: auto; overflow: hidden;"> 
</div> 
<div id="subtabs-2" style="height: auto; overflow: hidden;"> 
</div> 

$(document).ready(function() { 
         $("#tabs").tabs(); 
      $("#tabs").tabs({ selected: '<%=Model.SelectedTab %>' }); 
    }); 

Note: onclick fill the html in the tabs