Html “引导模式”；“第页”；

如何在引导模式上创建“页面”查看体验

这是许多移动应用程序中使用的一种流，但通过查看Bootstrap的组件，我无法理解如何实现这种流，或者它是否支持这种流

最好只使用普通的引导，很少甚至不使用javascript

---

我经常这样做，但恐怕您可能不得不使用JavaScript

在模式中，最初只显示第一个“页面”，并有一些隐藏的div，其中包含其他“页面”

在要开始的其他页面上放置一个“隐藏”类，将其设置为显示：无

当用户单击“至第二页”时，通过向其添加“隐藏”类来隐藏当前显示的div。然后从要显示的div/页面中删除“hidden”类，从而使其可见

您的HTML结构：

<div class="page-one">
Page One
</div>

<div class="page-two hidden">
Page Two
</div>

---

最后，我创建了一个小小的javascript/css代码片段，以便仅使用html就可以轻松地完成这项工作

片段：

document.body.addEventListener('click', evt => {
    if(evt.target.matches('.paginator-button')){
    const target = evt.target;
    const href = target.getAttribute("href");
    const activePage = target.closest('.paginator.paginator-active');
    activePage.classList.remove('paginator-active');
    activePage.parentElement.querySelector(href).classList.add('paginator-active');
  }
});

Css:

.paginator{
  display : none;
}
.paginator-active{
  display : inherit;
}

用法示例：

.paginator

元素需要是同级

.paginator按钮

必须是

.paginator

<div class="paginator paginator-active" id="pageHome">
  <button class="paginator-button" href="page2">To Page 2</button>
</div>
<div class="paginator paginator-active" id="page2">
  <button class="paginator-button" href="pageHome">To Home</button>
</div>

至第2页
回家

普通小提琴：

---

jqueryfiddle:

我没有任何代码可以给出，只有我的想法。您可以使用JavaScript在单击按钮或页面加载时打开第一个模式。然后，当用户单击“转到第二页”按钮或链接时，运行一个JavaScript函数，隐藏第一个模式窗口，并打开第二个模式窗口。下面将让您很好地了解JavaScript的使用量有多少。至于在没有JavaScript和html的情况下实现您想要的功能，我认为这是不可能的。希望这能帮上忙。到目前为止你都试了些什么？谢谢！我做了一个引导式javascript解决方案，仅当您感兴趣时才使用html：

<div class="paginator paginator-active" id="pageHome">
  <button class="paginator-button" href="page2">To Page 2</button>
</div>
<div class="paginator paginator-active" id="page2">
  <button class="paginator-button" href="pageHome">To Home</button>
</div>