引导模式“页面”

Question

如何在自举模式下获得“页面”观看体验？

这是许多移动应用程序中使用的流程，但是通过查看Bootstrap的组件，我无法弄清楚如何进行此类流程，甚至无法支持它。

最好只使用Vanilla Bootstrap，很少甚至不用JavaScript。

Answer 1

我做了很多事情，但是恐怕您可能必须使用JavaScript。

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

在其他页面上放置“隐藏”类以使其开始显示：无。

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

您的HTML结构：

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

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

然后为每个按钮添加一些类似这样的jQuery：

$(".btn-show-page-two").on( "click", function() {
        $(".page-one").addClass("hidden");
        $(".page-two").removeClass("hidden");
    });

Answer 2

我最终创建了一个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-button必须是.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>

普通JS小提琴：http://jsfiddle.net/ppgab/3yzxecv7/7/

Jquery小提琴：http://jsfiddle.net/ppgab/1Luvwar5/3/