2

我无法让 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>

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

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

但我很不确定如何采取行动。先感谢您。

4

1 回答 1

0

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

您需要将 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>

检查标签文档。

JSFIDDLE 演示 1

如果您也在寻找第二个 id 作为标签，

JSFIDDLE 演示 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";

?>

它向我展示了这一点，

在此处输入图像描述

从评论来看，

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

于 2013-08-18T09:43:42.213 回答