首次单击后引导程序 4 显示选项卡不起作用

Posted 2023-05-08

【中文标题】首次单击后引导程序 4 显示选项卡不起作用

【英文标题】：bootstrap 4 show tabs doesn't work after first click

【发布时间】：2020-09-29 22:46:57

【问题描述】：

我使用 bootstrap 4 选项卡来显示表单（内容选项卡），如下所示：

html：

<div class="footer">
   <div id="newsletter">
     <div class="newsletter">
       <div class="tabs">
         <ul class="list-unstyled">
           <li class="active">
             <a href="#newsletter_email" data-toggle="tab" class="newsletter_email"></a>
           </li>
           <li>
             <a href="#newsletter_mobile" data-toggle="tab" class="newsletter_mobile"></a>
           </li>
         </ul>
       </div>
       <div class="tab-content">
         <div class="tab-pane fade in active show" id="newsletter_email">
           <div class="newsletter_frm">
             <form class="ajax" action="" noscroll="yes">
               <input type="text" name="email" id="email" placeholder="email" class="newsletter_inp" error="" check="email" check_error="">
               <button type="submit" class="newsletter_btn"></button>
             </form>
           </div>
         </div>
         <div class="tab-pane fade in" id="newsletter_mobile">
           <div class="newsletter_frm">
             <form class="ajax" action="" noscroll="yes">
               <input type="text" name="mobile" id="mobile" placeholder="mobile" class="newsletter_inp" error="" check="mobile" check_error="">
               <button type="submit" class="newsletter_btn"></button>
             </form>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

现在，In action bootstrap 选项卡仅在第一次更改时有效（单击显示内容选项卡的图标），之后就不起作用了。如何解决这个问题？

Demo HERE

【参考方案1】：

将nav 类添加到具有list-unstyled 类的<ul>。

<ul class="list-unstyled nav">