Jquery 选项卡 - 多个选项卡 - 连接在一起

Question

我需要在一个页面上有 2 个 jquery 选项卡，这样当您打开选项卡 A 上的 link 1 时，它也会打开选项卡 B 上的 link 1

这可能吗？我使用的是相同的 class，但是当单击 link 时，它只会打开其下方的选项卡内容

感谢您的帮助

<div id="tabA" class="tabJoined">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
        <li><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>
<div id="tabid"></div>


<div id="tabB" class="tabJoined">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>
        </li>
        <li><a href="#tabs-2">Tab 2</a>
        </li>
        <li><a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>
<div id="tabid"></div>


<script>
 $(".tabJoined").tabs({
            activate: function () {
            }
        });
</script>

Answer 1

您可以在适当的选项卡上触发 click 事件。考虑以下因素。

$(function() {
  $(".tabJoined").tabs({
    activate: function(e, ui) {
      var source = $(this);
      var target = $(".tabJoined").not(source);
      var tInd = source.tabs("option", "active");
      target.tabs("widget").find(".ui-tabs-anchor:eq(" + tInd + ")").click();
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabA" class="tabJoined">
  <ul>
    <li><a href="#tabs-1">Tab 1</a>
    </li>
    <li><a href="#tabs-2">Tab 2</a>
    </li>
    <li><a href="#tabs-3">Tab 3</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for Tab A-1</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab A-2</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab A-3</p>
  </div>
</div>
<div id="tabB" class="tabJoined">
  <ul>
    <li><a href="#tabs-1">Tab 1</a>
    </li>
    <li><a href="#tabs-2">Tab 2</a>
    </li>
    <li><a href="#tabs-3">Tab 3</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for Tab B-1</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab B-2</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab B-3</p>
  </div>
</div>

Jquery 选项卡 - 多个选项卡 - 连接在一起

Jquery Tabs - multiple tabs - join together

jquery

jquery-ui