使用Bootstrap管理具有伪分页功能的单页应用

Question

用例。我需要一个单页应用程序 (SPA)，但希望保留 "pseudo" 页面功能。注意：登录后通过 Ajax 为不同业务用户的角色定制的调用将内容推送到应用程序...

我有一个菜单：

<ul class="cust_style components">
    <li class="active">
        <a class="btn btn-primary" data-toggle="collapse" href="#home" role="button" aria-expanded="false" aria-controls="collapseExample">Home</a>
    </li>
    <li>
        <a class="btn btn-primary collapsed" data-toggle="collapse" href="#about" role="button" aria-expanded="false" aria-controls="collapseExample">About</a>
    </li>
    <li>
        <a class="btn btn-primary collapsed" data-toggle="collapse" href="#stuff" role="button" aria-expanded="false" aria-controls="collapseExample">Stuff</a>
    </li>
</ul>

我有 html div 内容...

<div class="jumbotron collapse show" id="home"> 
    <h1>Home Page Content</h1>
    <p> Blah, blah, blah...</p>
</div>
<div class="jumbotron collapse" id="about">
    <h1>About...</h1>
    <p>One, two, three...</p>
</div>
<div class="jumbotron collapse" id="stuff">
    <h1>Stuff...</h1>
    <p>Data. Data. Data....</p>
</div>

显然，每个超大屏幕 div 都代表一个 'page' 用于显示。我想根据用户的菜单选择一次显示这些。

不幸的是，bootstrap 折叠功能是一个简单的切换。 Bootstrap collapse 添加或删除元素的 show class 标签。单击一个菜单项以显示链接的内容，单击相同的菜单项以关闭内容显示...效果很好，但这不是我想要的...我想要单击一次菜单来切换 bootstrap collapse --> show 可见并将其余项目切换为 --> 折叠（隐藏）。

我想我可以在每次进行任何菜单选择时从每个超大屏幕元素中删除 class show，但这会对 'native' bootstrap 折叠数据产生不利影响-我想打开的菜单选择的切换功能。

Bootstrap 折叠工具可以用作简单的菜单控制器吗？

其他想法？

Answer 1

事实证明，Bootstrap Tabs Navigation tool 在这里是一个更好的选择。有关选项卡导航的更多信息，请从此处的 link 向下滚动至 And with vertical pills.

代码摘录：

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
    <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#about" role="tab" aria-controls="v-pills-profile" aria-selected="false">About</a>
    <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#stuff" role="tab" aria-controls="v-pills-messages" aria-selected="false">Stuff</a>
</div>

和页面内容...

<div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <div class="jumbotron">
            <h1>Home Page Content</h1>
            <p> Blah, blah, blah...</p>
        </div>
    </div>
    <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <div class="jumbotron">
            <h1>About...</h1>
            <p>One, two, three...</p>   
        </div>
    </div>
    <div class="tab-pane fade" id="stuff" role="tabpanel" aria-labelledby="v-pills-messages-tab">
        <div class="jumbotron">
            <h1>Stuff...</h1>
            <p>Data. Data. Data....</p>                 
        </div>
    </div>
</div>

更好的导航控制器工具...不需要额外的 javascript。

Github repo: Bootstrap-SPA-Sidebar-Menu

使用Bootstrap管理具有伪分页功能的单页应用

Use Bootstrap to manage a single page app with pseudo pagination functions

menu

twitter-bootstrap

single-page-application

bootstrap-4