jQuery将多个选项卡作为一个选项卡

我有一个页面，有多个选项卡组，但他们作为独立的组，我希望他们被视为一个单独的组。原因是我有两行选项卡，我希望这些选项卡的内容位于它所属的行下，当active按下第二行选项卡时，该行将处于该行下

一些HTML是：

<ul>
    <li><a href="#1">1 of 8</a></li>
    <li><a href="#2">2 of 8</a></li>
    <li><a href="#3">3 of 8</a></li>
    <li><a href="#4">4 of 8</a></li>
</ul>
<div id="1">1 content here</div>
<div id="2">2 content here</div>
<div id="3">3 content here</div>
<div id="4">4 content here</div>

<!-- Second row of tabs -->
<ul>
    <li><a href="#5">5 of 8</a></li>
    <li><a href="#6">6 of 8</a></li>
    <li><a href="#7">7 of 8</a></li>
    <li><a href="#8">8 of 8</a></li>
</ul>
<div id="5">5 content here</div>
<div id="6">6 content here</div>
<div id="7">7 content here</div>
<div id="8">8 content here</div>

这里有1个内容
这里有2个内容
这里有3个内容
这里有4个内容






这里有5个内容
这里有6个内容
这里有7个内容
这里有8个内容

有什么想法吗

---

本质上与此相同，但您可以看到第一组选项卡4、5、6与第二组选项卡4、5、6是分开的，但我希望（如果可能）两组选项卡链接在一起，但内容显示在JSFIDLE中。

没有看到css，或者脚本不可能提供太多帮助……在jsfiddle.net中创建一个演示，展示布局对象的概述让两行“链接在一起”的目的是什么？当它们“链接在一起”时与未“链接在一起”时，哪些行为将发生变化？单击第2行选项卡时，第1行内容将隐藏，单击第1行选项卡时，第2行内容将隐藏。这两行属于同一选项卡分组，但显示在页面的不同部分以及设置活动类等