我使用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>

现在，在操作中，引导选项卡只在第一次更改中工作（点击显示内容选项卡的图标），之后就不工作了。 如何解决这个问题？

此处演示