如何获取jQuery Ui标签来“阅读”孩子
[英]How to get jQuery Ui Tabs to “read” children
问题描述
im having trouble getting jQuery Ui Tabs to work with my setup. 
我在让jQuery Ui标签与我的设置配合使用时遇到问题。 Basically it works fine on Ul li's, but wont read ul li ul li's (links in submenu's of my navigation. Here is my setup simplified: 基本上，它可以在Ul li上正常工作，但不会阅读ul li ul li（导航的子菜单中的链接。这是简化的我的设置：
<div class="navigation">
<ul>
<li><a href="#tabs-1">ONE</a></li>
<li class="sub">
<a href="ajax/test.php">TWO</a>
<ul class="submenu">
<li><a href="ajax/testA.php">A</a></li>
<li><a href="ajax/testB.php">B</a></li>
<li><a href="ajax/testC.php">C</a></li>
</ul>
</li>
<li><a href="ajax/test2.php">THREE</a></li>
</ul>
</div>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>
One, Two and Three work perfectly fine, but ABC will send me to the link instead of pulling it with ajax. 一，二和三工作正常，但是ABC会将我发送到该链接，而不是使用Ajax拉动它。 I think im missing something in my script wich is just: 我认为我在脚本中缺少的只是：
<script>
$(function() {
$( ".navigation" ).tabs();
});
</script>
But im quite unsure on how to act. 但是我不确定如何采取行动。 Thank you in advance. 先感谢您。
1 个解决方案
解决方案1
0 已采纳 2013-08-18 09:43:42
It works fine for me, if I follow the format as in jquery ui's tabs documentation , 如果我遵循jquery ui的标签文档中的格式，对我来说效果很好
You need to give id to your ul as this, 您需要为此提供ID给您的ul，
<div class="navigation">
<ul>
<li><a href="#tabs-1">ONE</a></li>
<li class="sub">
<a href="#tabs-2">TWO</a>
</li>
<li><a href="#tabs-3">THREE</a></li>
</ul>
<ul id="tabs-2" class="submenu">
<li><a href="ajax/testA.php">A</a></li>
<li><a href="ajax/testB.php">B</a></li>
<li><a href="ajax/testC.php">C</a></li>
</ul>
</div>
Check the tabs documentation . 检查选项卡文档 。
If you are looking for second id to be tabs too, 如果您也希望将第二个ID用作标签，
And after you I saw the link you gave me, the child ul too needs to be tabbed so that you can get contents using ajax, just by providing a href attribute. 在您看到您给我的链接之后，也需要对子对象ul进行制表，以便仅通过提供href属性就可以使用ajax获取内容。
EDIT, 编辑，
I made two files, 我做了两个文件
maindir
- index.html
- ajax (directory)
-- testB.php
index.html, index.html，
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" edit="mootools shell, easy test you snippets before implementing"/>
<meta name="keywords" edit="mootools,javascript,javascript framework,shell,test"/>
<meta name="robots" edit="all"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/tabs/resources/demos/style.css" />
</head>
<body>
<div class="navigation">
<ul>
<li><a href="#tabs-1">ONE</a></li>
<li class="sub">
<a href="#tabs-2">TWO</a>
</li>
<li><a href="#tabs-3">THREE</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>
<div id="tabs-2">
<ul class="submenu">
<li><a href="ajax/testA.php">A</a></li>
<li><a href="ajax/testB.php">B</a></li>
<li><a href="ajax/testC.php">C</a></li>
</ul></div>
</div>
<script type="text/javascript">
$( ".navigation" ).tabs();
$("#tabs-2").tabs();
</script>
</body>
</html>
testB.php, testB.php，
<?php
echo "content of B";
?>
And it shows me this, 它向我展示了这一点，
From comments, 根据评论，
In jquery-ui, you can directly give link to get content via ajax.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.