为什么我的小提琴呈现与我的测试 HTML 页面不同
why does my fiddle render differently than my test html page?
我找到了一个小提琴,它有一个我想要的功能(http://jsfiddle.net/R5sSh/),但我无法让它在带有较新的jquery 2.X和jquery mobile 1.4.X的测试页面上工作。
我的小提琴:http://jsfiddle.net/skfneasfbif/m11v6tef/
我的示例页面,从我的小提琴创建:
<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>
它呈现没有选项卡,只包含文本,并且在单击链接时不执行任何操作。
我的测试页面有什么问题? 是否有调试器可以向我显示我的错误?
编辑:我已经更新了javascript,但它仍然无法正确呈现。 我的评论中有一个测试页面。
您需要将
它只适用于你的jsFiddle
以下内容包含在 jQuery DOM 就绪事件处理程序函数中,因为在调用此代码时,相应的 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"); }
});
});
它只适用于你的jsFiddle
,因为jsFiddle会自动将你的JavaScript包装在后端的DOM就绪事件处理程序函数中。
相关文章:
- 无法将数据从firebase获取到我的html页面
- 我的HTML按钮没有在Javascript中运行
- 我的html有一些错误
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- 为什么<p>没有插入到我的html中
- 如何在我的html网页中使用jquery自动完成
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- 如何重定向到我的html网站youtube嵌入视频打开在youtube应用程序
- 为什么我的html页面没有在<ui视图>
- 在将javascript附加到我的html中时遇到问题
- 为什么我的HTML标签消失了
- 使用 JavaScript 在我的 html 页面中放大图像
- 如何在javascript中调用onclick事件?我没有'我不想在我的HTML页面中使用任何事件
- 我的HTML、CSS和Javascript应该放在一起还是分开
- 为什么我的HTML似乎无法访问我的javascript
- 如何使用 javascript 向我的 html 添加内容而不擦除整个页面
- 如何为我的 html 表单制作打印预览和打印按钮
- 无法将我的 html 文档连接到 jquery
- JavaScript函数不适用于我的HTML表单