Question

我正在尝试使用Bootstrap选项卡，但遇到了一些问题

这可以按预期运行，我可以在选项卡之间切换

        <ul class="nav nav-tabs" id="myTab" role="tablist">
           <li class="nav-item">
             <a class="nav-link active" id="tabA-tab" data-toggle="tab" href="#tabA">Tab A</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" id="tabB-tab" data-toggle="tab" href="#tabB">Tab B</a>
           </li>
         </ul>
         <div class="tab-content" id="myTabContent">
           <div class="tab-pane fade show active" id="tabA" role='tabpanel'>...</div>
           <div class="tab-pane fade" id="studio" role='tabB'>...</div>
         </div>

当我添加onclick处理程序时，选项卡会切换，但随后会立即切换回第一个。

        <ul class="nav nav-tabs" id="myTab" role="tablist">
           <li class="nav-item">
             <a class="nav-link active" id="tabA-tab" data-toggle="tab" href="#tabA" onclick='getTab()'>Tab A</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" id="tabB-tab" data-toggle="tab" href="#tabB">Tab B</a>
           </li>
         </ul>
         <div class="tab-content" id="myTabContent">
           <div class="tab-pane fade show active" id="tabA" role='tabpanel'>...</div>
           <div class="tab-pane fade" id="tabB" role='tabpanel'>...</div>
         </div>

getTab（）的JavaScript

     function getTab()                                                                           
      {                                                                                               
         $.post ( "APIaddress" , function ( data ) {                                              
            $ ( "#tabA" ).html ( data );                                                                         
         } );                                                                                        
      }

我尝试过的

将onclick移到li而不是锚点
将event.preventDefault（）和event.stopPropogation（）添加到getTab（）

两者的结果相同

此外，如果我完全删除javascript onclick调用（如第一个代码段中所示），则选项卡开关将正常工作。然后，如果我从控制台调用Javascript，它将立即切换回第一个选项卡

引导选项卡不需要的切换

0 个答案: