Javascript 如何使用JQuery为下一个和上一个按钮创建一个有效的方法来显示/隐藏单个HTML页面的部分？

我有一个由几个部分组成的HTML文件，我需要能够一次显示一个部分。每个部分的底部都有“下一个”和“上一个”按钮，用于显示下一个部分并隐藏当前处于焦点的部分

最初，我使用一种非常简单的方法来实现这一点：

<section id="Page1" class="page" style="display:none">
  <p>Content of page 1</p>
  <h3><span onclick="show('Page2');">Next</span></h3>
</section>
<section id="Page2" class="page" style="display:none">
  <p>Content of page 2</p>
  <h3><span onclick="show('Page1');">Previous</span></h3>
  <h3><span onclick="show('Page3');">Next</span></h3>
</section>
<section id="Page3" class="page" style="display:none">
  <p>Content of page 3</p>
  <h3><span onclick="show('Page2');">Previous</span></h3>
</section>

第1页内容

下一个
第2页内容

以前的
下一个
第3页内容

以前的

但是，由于节的数量会波动，并且第一节和最后一节的内容总是相同的，因此我想让使用此HTML模板的人能够轻松地删除中间所有不需要的节，而不必更新Prev/Next按钮代码所针对的ID

这是我的小提琴：

我启动了一些几乎可以正常工作的JQuery（在//Next Prev Buttons注释下面）。我使用的是：focus，这意味着它只针对包含按钮的范围，但我无法确定按钮的父节标记的选择器

---

提前感谢您的时间。：）

将您的功能更改为：

//Next Prev Buttons

$('.pageNext').on('click', function showNext(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().next().show();
});

$('.pagePrev').on('click', function showPrev(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().prev().show();
});

---

将您的功能更改为：

//Next Prev Buttons

$('.pageNext').on('click', function showNext(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().next().show();
});

$('.pagePrev').on('click', function showPrev(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().prev().show();
});

---

：focus

选择器将不会选择您的

，因为它会。由于

是被单击以触发单击处理程序的元素，因此可以通过

this

（或者

$（this）

（如果需要jQuery版本）访问它

$。下一步

。由于下一节不是您的

，

$的兄弟节。下一节将找不到它。您需要使用找到父级
，然后从那里转到下一节

您正在使用
$（this.hide（），它仅隐藏单击的元素。同样，使用
$（this.nexist（'section'）
查找整个节并隐藏它

使用JavaScript中定义的点击处理程序，您不需要HTML中的
onclick
属性。移除它们

总而言之：


$（'.pageNext'）。在（'click'，函数showNext（）上{
//尽可能缓存DOM查找
const$currentSection=$（this）.closest（'section'）；
$currentSection.next（'section'）.show（）；
$currentSection.hide（）；
});
$（'.pagePrev'）。在（'click'，函数showPrev（）{
const$currentSection=$（this）.closest（'section'）；
$currentSection.prev（'section'）.show（）；
$currentSection.hide（）；
});

第1页内容

下一个
第2页内容

以前的
下一个
第3页内容

以前的
下一个
第4页内容

以前的
下一个
第5页内容

以前的
下一个
第6页内容

以前的
下一个
第7页内容

以前的
焦点
选择器不会选择您的
，因为它会。由于
是被单击以触发单击处理程序的元素，因此可以通过
this
（或者
$（this）
（如果需要jQuery版本）访问它

$。下一步
。由于下一节不是您的
，
$的兄弟节。下一节将找不到它。您需要使用找到父级
，然后从那里转到下一节

您正在使用
$（this.hide（），它仅隐藏单击的元素。同样，使用
$（this.nexist（'section'）
查找整个节并隐藏它

使用JavaScript中定义的点击处理程序，您不需要HTML中的
onclick
属性。移除它们

总而言之：


$（'.pageNext'）。在（'click'，函数showNext（）上{
//尽可能缓存DOM查找
const$currentSection=$（this）.closest（'section'）；
$currentSection.next（'section'）.show（）；
$currentSection.hide（）；
});
$（'.pagePrev'）。在（'click'，函数showPrev（）{
const$currentSection=$（this）.closest（'section'）；
$currentSection.prev（'section'）.show（）；
$currentSection.hide（）；
});

第1页内容

下一个
第2页内容

以前的
下一个
第3页内容

以前的
下一个
第4页内容

以前的
下一个
第5页内容

以前的
下一个
第6页内容

以前的
下一个
第7页内容

以前的
这是使用JQuery的一个要求吗？还是您接受任何一种可以简化HTML工作的解决方案？您需要解决几个问题。这里有一个没有给出错误，为什么单击时隐藏按钮？单击时隐藏按钮，因为当前它的目标是：焦点。我不想隐藏下一个/上一个按钮。此外，我对非JQuery解决方案持开放态度，但更喜欢Javascript（或库），因为我将把完成的代码插入Litmos（一种几乎随机接受某些代码并覆盖其他代码的LMS）所有这些都需要删除。这是使用JQuery的要求吗？还是您接受任何可以简化HTML工作的解决方案？您的小提琴有几个问题。这里有一个没有给出错误的问题，为什么您在单击时隐藏按钮？单击时隐藏按钮，因为当前它的目标是：焦点。我不想下一个/上一个按钮将被隐藏。此外，我对非JQuery解决方案持开放态度，但更喜欢Javascript（或库），因为我将把完成的代码插入Litmos（一个几乎随机接受某些代码并覆盖其他代码的LMS）。onclick=“showPrev（）”和onclick=“showNext（）所有这些都需要删除非常感谢您的合理回复！我是JQuery新手，因此还不知道其中的细微差别（比如span不是一个可选项卡的元素）。你不仅纠正了我的代码，还帮我解释了哪里出了错。继续踢屁股，奥克斯塔科D@CodeLyfe只是为了完整性添加了香草的等价物