Question

您好我有一个仪表板Im建筑，左侧ul导航堆栈和右侧导航标签。我想让左侧的每个链接打开相同的导航选项卡，但具有不同的相应内容。因此，“状态”链接将显示4个具有不同状态信息的选项卡，“项目”显示其中的4个类别等。换句话说，左侧的每个链接应显示一组新的选项卡窗格和内容，所有共享相同的选项卡结构体。无法找到解决方案，我确定这是一个我不知道的技巧。

Heres当前代码：

<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>

仪表板看起来像这样：

dashboard snapshot

另一个烦恼是，当移动显示页面折叠时，nav-tabs会挤出导航堆叠的链接，使其无法点击，如下所示：

tabs crowding when collapsed

非常感谢您的帮助。编辑：认为我可以做的是一些后端逻辑或许，如果一个类=活动然后显示选项卡内的内容，其他li活动，在选项卡中显示这样的内容。不确定如何工作 - 现在我有一组单独的4个选项卡，左边的每个链接堆叠在一起 - 丑陋和复杂的外观。

Answer 1

取消了对轮子的这种令人讨厌的重新发明，为每个链接呈现页面的侧边栏。

如何通过ul链接数据切换共享标签？

1 个答案: