Как узнать вкладки, выбранные из вертикальных и горизонтальных вкладок?

Question

У меня есть вкладки, расположенные на 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>

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