bugfix> html > 投稿

次のようなHTMLページにタブが配置されています。

 1 2 3 4 5 
A
B
C
B
D

そして、 A and 3 を選択すると 、対応するデータを見ることができますまたは D and 1 を選択した場合 、そこにあるものを見ることができます。

しかし、フォームを追加する予定です。したがって、 A and 3 を選択すると 、フォームを見ることができますが、このタブの値は事前定義されていません。動的であり、データベースから取得されます。フォームが取得されたら、どの垂直タブと水平タブが押されているかをどのように確認できますか?フォームの値を対応するテーブルのデータベースに更新できるようにします。

私は python flask を使用していますバックエンドと私のコードは次のとおりです。

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Title</h4>
    <!-- Nav tabs -->
    <div class="vtabs">
      <ul class="nav nav-tabs tabs-vertical" role="tablist">
        <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#home0" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">A0</span> </a> </li>
        {% for i in range(1,5) %}
        <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#home{{ i }}" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">A{{ i }}</span> </a> </li>
        {% endfor %}
      </ul>
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active show" id="home0" role="tabpanel">
          0
        </div>
        {% for i in range(1,5) %}
        <div class="tab-pane" id="home{{ i }}" role="tabpanel">
          <div class="card">
            <div class="card-body p-b-0">
              <h4 class="card-title">Form header</h4>
              <!-- Nav tabs -->
              <ul class="nav nav-tabs customtab2" role="tablist">
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#home7" role="tab" aria-selected="false"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Home</span></a> </li>
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile7" role="tab" aria-selected="false"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
                <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#messages7" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content">
                <div class="tab-pane" id="home7" role="tabpanel">
                  <div class="p-20">
                    <h5>Best Clean Tab ever</h5>
                    <h6>you can use it with the small code</h6>
                    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
                  </div>
                </div>
                <div class="tab-pane p-20" id="profile7" role="tabpanel">2</div>
                <div class="tab-pane p-20 active show" id="messages7" role="tabpanel">3</div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  < /div>

回答 1 件
  • 現在のタブ選択を保存できる隠しフィールドを持つことができます。リンクをクリックすると、その非表示フィールドを現在の選択に更新できます。

    <input type="hidden" id="CurrentSelectedTab" />
    <ul class="nav nav-tabs tabs-vertical" role="tablist">
        <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#home0" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">A0</span> </a> </li>
        {% for i in range(1,5) %}
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#home{{ i }}" onclick="return UpdateSeletedTab(i);" role="tab" aria-selected="true">
                <span class="hidden-sm-up"><i class="ti-home"></i></span>
                <span class="hidden-xs-down">A{{ i }}</span>
            </a>
        </li>
        {% endfor %}
    </ul>
    
    <script type="text/javascript">
        function UpdateSeletedTab(i) {
            $("#CurrentSelectedTab").value(i);
        }
    </script>
    
    

あなたの答え