Javascript Jquery基于隐藏/显示的动态数据单击

我正在努力用jquery实现一个标签系统（而不是分页系统），它将像carousole一样工作

以下是代码片段：

<div class="tab">
    <p>Tab 1</p>
</div>

<div class="tab">
    <p>Tab 2</p>
</div>

<div class="tab">
    <p>Tab 3</p>
</div>

<div class="tab">
    <p>Tab 4</p>
</div>

因此，如果我点击

选项卡2

它应该显示如下：

tab 2 tab 3

tab 3 tab 4

然后单击

选项卡3

它应该显示如下：

tab 2 tab 3

tab 3 tab 4

因此，如果我点击

选项卡4

它应该显示

tab 4 tab 5

同样，下一个选项卡的行为也应该如此

有人能帮我用jquery完成吗

---

我只是尝试了很多，但每次都失败了。你可以尝试一下：每次单击都会显示下一个选项卡。如果你想反向穿越也请让我知道

$（文档）.ready（函数（）{
常量制表符=$（“#制表符”）；
//显示前两个选项卡的步骤
$（tabs.children（“.tab”）.slice（0,2.show（）；
$（“.tab”）。单击（函数（）{
if（$（this）.is（“：first child”）| |$（this）.is（“：last child”））{
返回false；
}
//如果你想把标签换回去
如果（！$（this）.prev（）是（“：可见”））{
$（this.next（）.css（“display”，“none”）；
$（this.prev（）.css（“显示”、“块”）；
返回；
}
$（this.prev（）.css（“显示”、“无”）；
$（this.next（）.css（“显示”、“块”）；
});
});

.标签{
显示：无；
}
表1

表2

表3

表4

您可以尝试一下：每次单击都会显示下一个选项卡。如果你想反向穿越也请让我知道


$（文档）.ready（函数（）{
常量制表符=$（“#制表符”）；
//显示前两个选项卡的步骤
$（tabs.children（“.tab”）.slice（0,2.show（）；
$（“.tab”）。单击（函数（）{
if（$（this）.is（“：first child”）| |$（this）.is（“：last child”））{
返回false；
}
//如果你想把标签换回去
如果（！$（this）.prev（）是（“：可见”））{
$（this.next（）.css（“display”，“none”）；
$（this.prev（）.css（“显示”、“块”）；
返回；
}
$（this.prev（）.css（“显示”、“无”）；
$（this.next（）.css（“显示”、“块”）；
});
});

.标签{
显示：无；
}
表1

表2

表3

表4

您是否正在尝试实现分页系统？不，我正在尝试分页系统它看起来像Careosleyes，但是，如果你想象一个旋转木马，它就像有一个分页系统，如果你改变标签，新的数据将从服务器获取并显示出来。如果是这样，使用一个简单的分页库，因为你已经拥有了所有的数据。试试看。尽管如此，@ahmed tag amer是对的，加载所有数据是有风险的。你是在尝试实现分页系统吗？不，我是在尝试分页系统它看起来像Careosleyes，但是，如果你想象一个旋转木马，它就像有一个分页系统，如果你改变标签，新的数据将从服务器获取并显示出来。如果是这样，使用一个简单的分页库，因为你已经拥有了所有的数据。试试看。不过@ahmed tag amer是对的，加载所有数据是有风险的。欢迎@howrecepes。我还添加了向后移动的代码，这是一个非常好的解决方案。我喜欢这些类型的解决方案，非常简单和优化。谢谢大家欢迎@howrecepes。我还添加了向后移动的代码，这是一个非常好的解决方案。我喜欢这些类型的解决方案，非常简单和优化。谢谢