如何通过ul链接切换共享选项卡

Question

嗨，我有一个仪表板我的建设，左边的ul导航堆栈和一个导航标签到右边。我想有每个链接在左边打开相同的导航选项卡，但有不同的相应内容。因此，"状态"链接将显示4个标签，其中包含不同的状态信息，"项目"显示4个类别，等等。换句话说，左边的每个链接都应该显示一组新的选项卡窗格和内容，它们都共享相同的选项卡结构。我找不到解决办法，我肯定我错过了一个诀窍。

当前代码:

<div class="container-fluid">
<div class="row">
    <div class="col-md-1 pull-left text-center">
        <ul class="nav nav-stacked">
            <li> <a href="/dashboard/"> <h4 style="color: seagreen;"> Dashboard </h4> </a> </li>
            <li> <a href="#status" data-target="#statusTabs"> Status </a>  </li>
            <li> <a href="#projects"> Projects </a> </li>
            <li> <a href="#settings"> Settings </a> </li>
            <li> <a href="#account"> Account </a> </li>
        </ul>   
    </div>                  <!-- Left nav stack  -->

  <div class="col-md-6 col-md-offset-2 text-center">                <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist" id="statusTabs">
        <li role="presentation"><a href="#status" aria-controls="status" role="tab" data-toggle="tab"> Server Status </a></li>
        <li role="presentation"><a href="#projects" aria-controls="projects" role="tab" data-toggle="tab"> Project Status </a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"> Status3 </a></li>
        <li role="presentation"><a href="#account" aria-controls="account" role="tab" data-toggle="tab"> Status4 </a></li>
    </ul>
  <!-- Tab panes -->
    <div class="tab-content align-center">
      <div role="tabpanel" class="tab-pane fade in active" id="status"> <br> <h3>  Status of project development and production. </h3> <p> <i class="fa fa-adjust" style="color:violet;"> </i> In Development , <i class="fa fa-upload" style="color:blue;"> </i> in production, <i class="fa fa-cog" style="color:orange;"> </i> in maintenance, <i class="fa fa-times" style="color:red;"> </i> offine, <i class="fa fa-bolt" style="color:green;"> </i> live.  </p> </div>
      <div role="tabpanel" class="tab-pane fade" id="projects"> <br> Projects you currently have in development, with quick view information on each. </div>
      <div role="tabpanel" class="tab-pane fade" id="settings"> <br> Settings for projects, preferences, and email notifications.  </div>
      <div role="tabpanel" class="tab-pane fade" id="account"> <br> Account details such as username, email, change password, account creation date, purchase history. </div>
    </div>
  </div>    
</div>

仪表盘看起来是这样的:

仪表板快照

另一个烦恼是，当移动显示页面折叠时，导航标签会挤占导航链接，使它们无法点击，就像这样:

标签页折叠时拥挤

非常感谢你的帮助。编辑:我想我能做的是一些后端逻辑，也许，像如果一个class=活动，然后在标签中显示内容，elif其他li活动，在标签中显示这样的内容。不知道如何工作-现在我有一个单独的4个标签的每个链接在左边堆叠在彼此的顶部-丑陋和卷曲的外观。

Answer 1

取消了这个讨厌的轮子的重新发明，用每个链接呈现一个页面的边栏。