Javascript 为什么我的fiddle呈现方式与我的测试html页面不同？_Javascript_Jquery_Html_Jsfiddle

Javascript 为什么我的fiddle呈现方式与我的测试html页面不同？

javascript jquery html

Javascript 为什么我的fiddle呈现方式与我的测试html页面不同？,javascript,jquery,html,jsfiddle,Javascript,Jquery,Html,Jsfiddle,我找到了一个fiddle，它有一个我想要的特性（），但是我无法让它在新的jquery2.X和jquerymobile1.4.X的测试页面上工作我的小提琴： <html> <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" /> <script src="//ajax.google

我找到了一个fiddle，它有一个我想要的特性（），但是我无法让它在新的jquery2.X和jquerymobile1.4.X的测试页面上工作

我的小提琴：

<html>
<head>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {

      $("#tabs").tabs({
          select: function(event, ui) { console.log("Tab selected"); }
      });
      $("#tabs-1 > #subtabs").tabs({
          select: function(event, ui) { console.log("subTab selected"); }
      });

  });
  </script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Tab1</a></li>
      <li><a href="#tabs-2">Tab2</a></li>
    </ul>
    <div id="tabs-1">
      <p>Console.log shows 1 message : "Tab selected"</p>
      <div id="subtabs">
        <ul>
          <li><a href="#subtabs-1">Subtab1</a></li>
          <li><a href="#subtabs-2">Subtab2</a></li>
        </ul>
        <div id="subtabs-1">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
        <div id="subtabs-2">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
      </div>
    </div>
    <div id="tabs-2">
      <p>Console.log shows 1 message : "Tab selected"</p>
    </div>
  </div>
</body>
</html>

我的示例页面，由我的小提琴创建：

<html>
<head>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {

      $("#tabs").tabs({
          select: function(event, ui) { console.log("Tab selected"); }
      });
      $("#tabs-1 > #subtabs").tabs({
          select: function(event, ui) { console.log("subTab selected"); }
      });

  });
  </script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Tab1</a></li>
      <li><a href="#tabs-2">Tab2</a></li>
    </ul>
    <div id="tabs-1">
      <p>Console.log shows 1 message : "Tab selected"</p>
      <div id="subtabs">
        <ul>
          <li><a href="#subtabs-1">Subtab1</a></li>
          <li><a href="#subtabs-2">Subtab2</a></li>
        </ul>
        <div id="subtabs-1">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
        <div id="subtabs-2">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
      </div>
    </div>
    <div id="tabs-2">
      <p>Console.log shows 1 message : "Tab selected"</p>
    </div>
  </div>
</body>
</html>


$（文档）.ready（函数（）{
$（“#制表符”）。制表符({
select:function（event，ui）{console.log（“tabselected”）；}
});
$（“#制表符-1>子制表符”）.tabs({
select:function（event，ui）{console.log（“subTab selected”）；}
});
});




Console.log显示1条消息：“已选择选项卡”




Console.log显示2条消息：“已选择子选项卡”和“已选择选项卡”。我只想选择子选项卡
Console.log显示2条消息：“已选择子选项卡”和“已选择选项卡”。我只想选择子选项卡
Console.log显示1条消息：“已选择选项卡”

它不显示选项卡，只包含文本，在单击链接时不执行任何操作

我的测试页面有什么问题？是否有调试器会向我显示错误

编辑：我已经更新了javascript，但它仍然不能正确呈现。我的评论中有一个测试页面。

您需要将以下内容包含在一个测试页面中，因为调用此代码时，相应的HTML还不存在

$("#tabs").tabs({
  select: function(event, ui) { console.log("Tab selected"); }
});
$("#tabs-1 > #subtabs").tabs({
  select: function(event, ui) { console.log("subTab selected"); }
});

应该是

$(document).ready(function() {

    $("#tabs").tabs({
        select: function(event, ui) { console.log("Tab selected"); }
    });
    $("#tabs-1 > #subtabs").tabs({
        select: function(event, ui) { console.log("subTab selected"); }
    });

});

它只在JSFIDLE中起作用，因为JSFIDLE会自动将JavaScript包装到后端的DOM就绪事件处理程序函数中。

我添加了更改（就绪函数包装和缩进），但仍然无法正确呈现。我在这里设置了一个测试页面：。@nk，如果您希望页面的工作方式相同，那么您必须包含与JSFIDLE中相同的所有外部资源。换句话说，您的测试页面缺少jQueryUI插件及其CSS。按照JSFIDLE页面的组织方式，它看起来像是在加载（jQuery1.x和jQueryUI）或（jQuery2.x和jQueryMobile）。但是是的，这就解决了，谢谢！