用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