无法使用 jQuery 在 HTML 的选项卡上捕获点击事件

Question

我知道这是一个非常基本的问题，我已经有了构建相同逻辑的逻辑，但我无法在选项卡上捕获 click 事件。这是相同的 JSfiddle 这是我的代码

    <html lang="en">
    <head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> </link>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  

    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

      <script>
    $(document).ready(function() {
        $('#tabs, #tabs-1').tabs({
            select: function(event, ui){
                var tabNumber = ui.index;
                var tabName = $(ui.tab).text();

                alert('Tab number ' + tabNumber + ' - ' + tabName + ' - clicked');
            }
        });
    });
      </script>
    </head>
    <body>
     <input type="text" id="text_box_id" ></input>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
      </ul>
      <div id="tabs-1">
        <p> text in tab1</p>
      </div>
      <div id="tabs-2">
        <p>Text in tab2</p>
      </div>
      <div id="tabs-3">
        <p>Text in tab3 </p>
      </div>
    </div>         
    </body>
    </html>

我是不是做错了什么？我是否正确导入了库？

Answer 1

Select 已弃用，使用 activate 代替 select。

http://bugs.jqueryui.com/ticket/7138

In order to improve consistency within the jQuery UI suite, select/selected will be renamed to activate/active across the board. What this means for tabs is that the selected option will be renamed to active, the select event will be renamed to beforeactivate, and the show event will be renamed to activate. The beforeactivate and activate options will include references to the tab and content panel for the old and new tabs, similar to accordion. In addition, the select method will be removed in favor of the setting the active option. Lastly, the deselectable option will be removed in 1.9 since it was deprecated in 1.8.

使用激活

 $('#tabs, #tabs-1').tabs({
            activate: function(event, ui){
              var tabNumber = ui.newTab.index(); // get index
              var tabName =  ui.newTab.text();   // get name
          alert('Tab number ' + tabNumber + ' - ' + tabName + ' - clicked');
            }
        });

JsFiddle:

https://jsfiddle.net/18418exe/27/

无法使用 jQuery 在 HTML 的选项卡上捕获点击事件

Unable to catch click event on Tabs in HTML using jQuery

html

jquery

tabs

Select 已弃用，使用 activate 代替 select。

JsFiddle: