Question

我最近一直在尝试使用或熟悉JQuery标签功能。但是，每当我尝试使用它时，我都会收到错误“undefined is not a function”。我已经研究过这个问题，并且很多人说它可能与.js文件没有被加载有关，但事实并非如此，因为我的控制台选项卡显示它已被加载。

这是我试图测试的HTML文件：

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Portal.css" media="screen" />
    <script type="text/javascript" src="Portal.js"></script>  
    <script src="tabs.js"></script>
    </head>
    <body>


    <div id="tabs">
    <ul>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
  </ul>
  <div id='tab1'>
       <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
      </div>
     <div id='tab3'>
                   <p>And this is the 3rd tab.</p>
             </div>
               </div>

    </body>
    </html>

tabs.js文件（在调试时抛出未定义的错误）：

$(document).ready(function () {
   $("div.tabs").tabs();
});

感谢。如果需要，我可以提供更多细节。还没有使用CSS（但我不认为这是问题）。

Answer 1

确定您正在从外部来源加载js。

我有类似的问题。我的代码在konqueror，opera和一些firefox / iceweasel浏览器中工作，但在其他浏览器中没有，而不是在chrome中。

事实证明，当我的页面是https托管时，我试图在不安全的http连接上加载外部js。这些链接被“不工作”的浏览器默默地丢弃了......我花了好几个小时才完成这个问题。

希望这可以帮助你或其他人。

Answer 2

您正在选择类标签，但您拥有的是ID标签。

将其更改为：

$( 'div#tabs' ).tabs();

或将您的HTML更改为：

class="tabs"

Answer 3

$( "#tabs" ).tabs()使用此代替$("div.tabs").tabs()

jQuery选项卡“未定义不是函数”

3 个答案: