ulリンク経由で共有タブを切り替える方法は？

Question

こんにちは私は左のulのnav-stackとnav-tabsの右側にダッシュボードのImビルディングを持っています。私は左の各リンクに同じナビゲーションタブを開き、異なる対応するコンテンツを持つようにします。 「ステータス」リンクにはステータス情報の異なる4つのタブとその中の4つのカテゴリを示す「プロジェクト」などが表示されます。つまり、左の各リンクには新しいタブペインとコンテンツのセットが表示され、構造。解決策を見つけることができませんでした、私は確かにtheresトリックイム欠けている。

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-タブがNAV-スタックアウト群衆リンクをクリックできないようにレンダリングする：

tabs crowding when collapsed

ありがとうございました。編集：もし私ができることは、バックエンドのロジックかもしれないと思うかもしれませんが、おそらく、クラス=アクティブな、タブ内のコンテンツを表示する、elifその他liアクティブ、タブでそのようなコンテンツを表示します。どのようにこれを動作させるか分かりません - 今は、左側の各リンクに4つのタブが別々にセットされています。醜く畳んだように見えます。

Answer 1

は、各リンクがページをレンダリングするサイドバーのために、ホイールのこの厄介な改革を廃止しました。