如何知道從垂直和水平選項卡中選擇的選項卡？

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