jQuery：快速地说关闭这个，打开那个？

我有一系列的div，有以下几个类：dots-1，dots-2，dots-3，dots-4 当页面打开时，只有“.dots-1”可见；其他3个div是隐藏的。您必须单击每个div上的按钮才能显示下一个div，即在dots-1上，单击按钮-1，关闭dots-1并打开dots-2。在dots-2上，单击按钮-2，关闭dots-2并打开dots-3

<div class="dots-1">
    Text 1
    <a class="button-1">Go to 2</a>
</div>

<div class="dots-2">
    Text 2
    <a class="button-1">Go to 3</a>
</div>

<div class="dots-3">
    Text 3
    <a class="button-1">Go to 4</a>
</div>

<div class="dots-4">
    Text 4
    <a class="button-1">End</a>
</div>

<style>
    .dots-2, .dots-3, .dots-4{display:none;}
</style>

文本1
去2号
文本2
去3号
文本3
去4号
文本4
终点
.dots-2、.dots-3、.dots-4{显示：无；}

是否有一种快速、紧凑的方式来编写jQuery代码，在单击每个按钮时关闭每个div并打开下一个div

否则，我会写出一个很长的jQuery代码，上面写着：当单击按钮1时，关闭dots-1，打开dots-2。单击按钮2时，关闭dots-2并打开dots-3

谢谢

试试这个：

$( "a[class^='button']" ).click(function () {
     $(this).parent().hide();
    $(this).parent().next().show();
});

---

您还可以查看

向我们展示相关的HTML，我们可以更好地建议如何使用HTML结构的性质来创建一个通用解决方案。我会将它们全部封装在另一个div中，并设置只有一个启用了类或类似的类。脚本将找到父级

div

的下一个同级（如果有）并显示它。然后，您不必更改CSS，只需使用一个选择器。