引导标签抛出数据[选项]不是功能错误

Question

我有几个引导翼片，每一个含有一种形式，我把一个取消按钮与类cancel_preset和我有这个功能为它：

$(".cancel_preset").on("click", function(){ 
    var _tab=$(this).closest(".tab-pane").attr("id"); //prints the correct id for every tab 
    $("a[href='#"+_tab+"']").tab('hide'); 
}); 

，但它给了我这个错误line: tab.js:124 Uncaught TypeError: data[option] is not a function

HTML：

<ul class="dropdown-menu"> 
    <h4>Select preset:</h4> 
    <li><a href="#create_preset_intro" class="preset_tab_toggle" data-toggle="tab" data-title="Intro preset (new)" id="preset_intro">Intro</a></li> 
    <li><a href="#create_preset_normal" class="preset_tab_toggle" data-toggle="tab" data-title="Normal preset (new)" id="preset_normal">Normal</a></li> 
    <li><a href="#create_preset_proprietary" class="preset_tab_toggle" data-toggle="tab" data-title="Proprietary preset (new)" id="preset_proprietary">Proprietary</a></li> 
</ul> 

<div class="tab-content" id="preset-content"> 
    <div class="tab-pane preset-containor" id="create_preset_intro"> 
     <form class="preset" id="f_preset_intro"> 
      <!-- some form inputs --> 
      <div class="clearer"></div> 
      <div class="pull-right"> 
       <button type="button" class="btn btn-default cancel_preset">Cancel</button> 
       <button type="submit" class="btn btn-success submit_preset">Create</button> 
      </div> 
      <div class="clearer"></div> 
     </form> 
    </div> 
    <div class="tab-pane preset-containor" id="create_preset_normal"> 
     <form class="preset" id="f_preset_normal"> 
      <!-- some form inputs --> 
      <div class="clearer"></div> 
      <div class="pull-right"> 
       <button type="button" class="btn btn-default cancel_preset">Cancel</button> 
       <button type="submit" class="btn btn-success submit_preset">Create</button> 
      </div> 
      <div class="clearer"></div> 
     </form> 
    </div> 
    <div class="tab-pane preset-containor" id="create_preset_proprietary"> 
     <form class="preset" id="f_preset_proprietary"> 
      <!-- some form inputs --> 
      <div class="clearer"></div> 
      <div class="pull-right"> 
       <button type="button" class="btn btn-default cancel_preset">Cancel</button> 
       <button type="submit" class="btn btn-success submit_preset">Create</button> 
      </div> 
      <div class="clearer"></div> 
     </form> 
    </div> 
</div> 

从我上冲关于这个主题的其他问题，他们大多表示，scrips是INCO mpatible 这些都是我的剧本包括：（bootstrap.js由laravel包括）：

<script src="/test2/public/js/jquery-3.1.1.min.js"></script> 
    <script src="/test2/public/js/less.min.js"></script> 
    <script src="/test2/public/js/alert.js"></script> 
    <script src="/test2/public/js/button.js"></script> 
    <script src="/test2/public/js/carousel.js"></script> 
    <script src="/test2/public/js/collapse.js"></script> 
    <script src="/test2/public/js/dropdown.js"></script> 
    <script src="/test2/public/js/modal.js"></script> 
    <script src="/test2/public/js/scrollspy.js"></script> 
    <script src="/test2/public/js/tab.js"></script> 
    <script src="/test2/public/js/popover.js"></script> 
    <script src="/test2/public/js/affix.js"></script> 
    <script src="/test2/public/js/transition.js"></script> 
    <script src="/test2/public/js/jquery-ui.min.js"></script> 

Answer 1

试试这个： 使用jQuery

$(".cancel_preset").on("click", function(){ 
    var _tab=$(this).closest(".tab-pane").attr("id"); 
    $("a[href='#"+_tab+"']").parent().hide(); 
    $("#"+_tab).hide(); 
});