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作为选项卡

   <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

使用jquery创建选项卡

3 个答案: