Jquery标签页--多个标签页--连接在一起。

Question

我需要在一个页面上有两个jquery标签，这样当你打开标签A上的链接1时，也会打开标签B上的链接1。

这可能吗？ 我正在使用相同的类，但当点击链接时，它只会打开下面的标签内容。

多谢

<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 事件在适当的Tab上。请考虑以下几点：

$(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>