javascript - jQuery Tabs - 同一页面上的多个选项卡块

Question

我有以下标签代码：

<div class="block_tabs_type_1">
<div class="tabs">
    <ul>
        <li><a href="#1" class="current"><span>First Tab</span></a></li><!-- tab link -->
        <li><a href="#2"><span class="icon cloud"></span></a></li><!-- tab link -->
        <li><a href="#3"><span>Nested Shortcodes</span></a></li><!-- tab link -->
    </ul>
</div>

<div class="tab_content">
    <!-- tab content goes here -->
    <p>Duis r inceptos himenaeos.</p>
</div>

<div class="tab_content">
    <!-- tab content goes here -->
    <p>Duis tincidunt er p elit.</p>
</div>

<div class="tab_content">
    <!-- tab content goes here -->
    <p>Duis tincidunt e inceptos himenaeos.</p>
</div>

<script type="text/javascript">
    jQuery('.block_tabs_type_1 .tabs').tabs('.block_tabs_type_1 .tab_content', {
        initialIndex : 0
    });
</script>

我希望将另一个选项卡块添加到同一页面，但是我正在努力让 JS 正常运行。

任何人都可以建议吗？

Answer 1

最简单的方法是简单地使用不同的选择器并调用它两次。

例子：

<script type="text/javascript">
    jQuery('.block_tabs_type_1 .tabs').tabs('.block_tabs_type_1 .tab_content', {
        initialIndex : 0
    });
    jQuery('.block_tabs_type_2 .tabs').tabs('.block_tabs_type_2 .tab_content', {
        initialIndex : 0
    });
</script>