使用引导管理具有伪分页功能的单页应用程序

Question

用例。我需要一个单页应用程序（SPA），但希望保持“伪”页面功能。注意：通过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中的每一个都代表一个用于显示的“页面”。我想根据用户的菜单选择一次显示这些。

不幸的是，引导折叠功能是一个简单的切换。引导折叠向元素添加或删除类标记。单击菜单项以显示链接的内容，单击同一菜单项以关闭内容显示…效果很好，但这不是我想要的…我想要单击一个菜单以切换引导折叠--

我想每次进行任何菜单选择时，我都可以从每个jumbotron元素中删除classshow，但这会对我要打开的菜单选择的“本机”引导折叠数据切换功能产生不利影响。

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

其他想法？




Answer 1

匿名用户

事实证明，引导选项卡导航工具在这里是一个更好的调用。有关选项卡导航的更多信息，请从此处的链接向下滚动到并使用垂直按钮。

代码提取：

<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-侧边栏-菜单