用jquery創建標籤

Question

所以，我對這個有點無知，我想知道在這個頁面上創建兩個標籤的最佳方式（「braga」和「lisboa」是2個標籤）：

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

我只想隱藏第一標籤中的內容，當選擇第二個選項卡，顯示了隱藏的內容用show（）和改變按鈕的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的標籤要使用任何可用的jQuery插件

<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