4

私はブートストラップモーダルを持っています。モーダルにはタブビューがあります。各タブは、そのコンテンツの部分的なビューをレンダリングしています。
部分ビューには URL がほとんど含まれていません。
私が抱えている問題は、タブ 2 の前にタブ 1 を定義すると、タブ 2 コンテンツの URL が機能しないことです。タブ 1 の前にタブ 2 を定義すると、タブ 1 の URL が機能しません。

以下は、モーダル本体内でタブを定義する方法です。 

<div class="panel with-nav-tabs panel-default">
     <div class="panel-heading">
           <ul class="nav nav-tabs">
                <li class="active">
                     <a href="#tab1" data-toggle="tab">Tab 1</a>
                </li>
                <li>
                     <a href="#tab2" data-toggle="tab">Tab 2</a>
                </li>

           </ul>
     </div>
     <div class="panel-body>
          <div class="tab-content">
               <div class="tab-pane fade" id="tab2">
                     @Html.Partial("Tab 2")
               </div>

               <div class="tab-pane fade in active" id="tab1">
                     @Html.Partial("Tab 1")
               </div>
           </div>
      </div>
</div>

問題を引き起こしている上記のコードからの以下のコードに注意してください。 

              <div class="tab-content">
                   <div class="tab-pane fade" id="tab2">
                         @Html.Partial("Tab 2")
                   </div>

                   <div class="tab-pane fade in active" id="tab1">
                         @Html.Partial("Tab 1")
                   </div>
               </div>

このコードでは、タブ 2 は、「タブ 1」の前に「タブ 2」の部分的なコンテンツをレンダリングしています。したがって、タブ 2 の URL は完全に正常に機能しています。

しかし、コンテンツのレンダリング方法の順序を変更するとします。同様に、タブ 1 がある場合、タブ 2 の前にコンテンツをレンダリングします。次に、タブ 1 の URL は正常に機能していますが、タブ 2 の URL は現在機能していません。

順序がタブのコンテンツに影響を与えて正しくレンダリングされない理由を理解できません。
タブを互いに影響を与えないように分離する方法はありますか。もう一方のタブを削除すると、両方のタブが正常に機能するためです。

あなたの提案を提供してください！

質問をしていますが、回答がありません。私はコーディングにかなり慣れていません。

手伝ってくれてありがとう！

4

0 に答える 0