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

Question

我需要在一个页面上的2个jquery标签，以便当您打开tabA上的链接1，它也会打开tabB上的链接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事件。请考虑以下内容。

​

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

​