如何让 jQuery Ui 选项卡“阅读”孩子答案

【问题标题】：How to get jQuery Ui Tabs to "read" children如何让 jQuery Ui 选项卡“阅读”孩子
【发布时间】：2013-08-18 08:59:36
【问题描述】：

我无法让 jQuery Ui 选项卡与我的设置一起使用。基本上它在 Ul li's 上工作正常，但不会读取 ul li ul li's（我的导航子菜单中的链接。这是我的简化设置：

<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>

一、二和三工作得很好，但是 A B C 会将我发送到链接而不是使用 ajax 拉它。我认为我在我的脚本中遗漏了一些东西：

     <script>
          $(function() {
        $( ".navigation" ).tabs();
      });
     </script>

但我很不确定如何行动。提前谢谢你。

【问题讨论】：

标签： jquery user-interface tabs

【解决方案1】：

如果我遵循 jquery ui 的tabs documentation 中的格式，它对我来说很好，

你需要像这样给你的ul提供id，

<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>

检查tabs documentation。

JSFIDDLE DEMO 1

如果您也在寻找第二个 id 作为选项卡，

JSFIDDLE DEMO 2

在你看到你给我的链接之后，孩子 ul 也需要被选项卡，这样你就可以使用 ajax 获取内容，只需提供一个 href 属性。

编辑，

我做了两个文件，

maindir
 - index.html
 - ajax (directory)
      -- testB.php

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，

<?php

echo "content of B";

?>

它向我展示了这一点，

来自 cmets，

在jquery-ui中，你可以直接给链接通过ajax获取内容。好那么问题是，孩子 ul li ul li，没有标签。我猜如果它也被标记了，那么只有你可以使用它来获取内容阿贾克斯。在我的第一个小提琴示例中，您单击一个 href，它将您重定向到显示 404。但在第二小提琴中，它有一个链接，但选项卡，它不会重定向，而是通过 ajax 获取内容。所以基本上你只需要像第二个例子那样做。做就是了 $("#tab-2").tabs()，这应该可以解决你的问题。

【讨论】：

啊我明白你的意思了，但是有没有办法解决它并让它深入到孩子身上？我尝试在我的结构中移动一些东西，但是这一切都崩溃了，因为很多东西都依赖于那个 gerarchy（滑块、css、图标）而且我不知道如何去修复它 :( 例如，如果我构建它就像你做的那样，子菜单出现在导航下方而不是点击的 li 下方，并且菜单的样式不是子菜单。
我可以，但我现在明白了我解释自己的错误，我已经连续 24 小时醒着。我不是指选项卡内的子项，而是菜单本身的子项。所以我的 geriarchy 就像我的问题一样，我只省略了 "
我纠正了我的问题，包括 tabs-2 ul。
好的，如果我显示实际问题，这会简单得多:) 转到77.235.53.36/garage.php，您将看到默认短语已加载。如果单击管理，它将使用 ajax 加载另一个文件。但是，如果您单击管理子菜单（员工）的元素，您会看到它会将您发送到页面，但不会动态加载。
但是管理选项卡也链接到一个php文件，并且可以正常工作。我使用的一切都在我的问题中，除了包括 jquery 和 jquery ui。在我的问题中，“TWO”会起作用，但“A”不会，两者都有 php 链接，但 A 在 TWO 的子菜单中。