引导选项卡显示上一个选项卡下方的内容

Question

I have a webform in which i am trying to implement tabs using bootstrap 4. The content for 1st tab is shown fine but when I switch tabs the content for the second tab is shown under the previous content and the tabs dont switch. Below is my code:

<nav class="nav nav-tabs nav-justified">
    <a class="nav-item nav-link active" data-toggle="tab" href="#teacher">Teacher Remarks</a>
    <a class="nav-item nav-link" data-toggle="tab" href="#marks">Marks</a>
</nav>

<div class="tab-content">
    <div id="teacher" role="tabpanel" class="tab-pane fade show active" aria-labelledby="teacher">
        <asp:UpdatePanel id="updPnl1">
            <ContentTemplate>
                Content of div1
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

    <div id="marks" role="tabpanel" class="tab-pane fade show active" aria-labelledby="marks">
        <asp:UpdatePanel id="updPnl2">
            <ContentTemplate>
                Content of div2
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

Can someone please help? I dont understand what I am doing wrong?

Answer 1

You've marked both tabpanels as show active , which means they will both display by default on a page load. Try removing the show and active classes from the second div. As well, due to how bootstrap renders the tab panels in the first place, you shouldn't need the div content to be in an UpdatePanel , I don't think.