2

私の設定で jQuery Ui Tabs を動作させるのに問題があります。基本的に、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、Three はまったく問題なく動作しますが、ABC は ajax でプルする代わりにリンクに送ってくれます。私のスクリプトには何かが欠けていると思います：

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

しかし、私はどのように行動するかについて非常に確信が持てません。前もって感謝します。

4

1 に答える 1

0

jquery ui's 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>

タブのドキュメントを確認してください。

JSFIDDLE デモ 1

2 番目の ID もタブにする場合は、

JSFIDDLE デモ 2

そして、あなたが私にくれたリンクを見た後、href属性を提供するだけでajaxを使用してコンテンツを取得できるように、子ulもタブ化する必要があります。

編集、

私は2つのファイルを作りました、

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 を表示するようにリダイレクトされます。したがって、基本的には、2 番目の例のようにする必要があります。$("#tab-2").tabs() を実行するだけで、問題が解決するはずです。

于 2013-08-18T09:43:42.213 に答える