3

ここで同じ質問がjqueryuiタブが機能していないことがわかりましたが、役に立ちませんでした。これはタブを作成する必要がある私のHTMLですが、機能していません。

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
        <link rel="stylesheet" href="jquery.ui.all.css">
    <script src="jquery-1.7.js"></script>
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.tabs.js"></script>

    <script>
        $(function() {
            $( "#tabs" ).tabs();
        });
   </script>
</head>
<body>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <p>Content 1.</p>
</div>
<div id="tabs-2">
    <p>Content 2.</p>
</div>
<div id="tabs-3">
    <p>Content 3.</p>
</div>
</div>

</body>
</html>

このhtmlの出力は次のとおりです。

     . Nunc tincidunt
     . Proin dolor
     . Aenean lacinia
 Content 1.

 Content 2.

 Content 3.

リスト要素はタブとして表示する必要がありますが、リストとして表示されます。どうしてこんなことに？前もって感謝します。

4

8 に答える 8

6

DOMがロードされる前にjQueryが実行されている可能性が高いので、次のことを試してください。

$(document).ready(function () {

    $("#tabs").tabs();

});
于 2011-11-29T10:23:56.407 に答える
4

答えが見つからない場合、これは古いまたは不一致のjQuery/jQuery-uiバージョンが原因です。両方を更新すると、魅力のように機能するはずです！

于 2013-07-22T15:30:43.433 に答える
1

自分のスクリプトの代わりにこれらのスクリプトを使用してみてください（一番下の行を置き換えるだけです）。

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   <script type="text/javascript">
       $(function() {
           $("#tabs").tabs();
       });
   </script>

また、CSSファイルのソースを次のように変更します。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />

jQueryのJSソースをうまく指定していないと思います。それが役に立てば幸い！

于 2011-11-29T10:41:53.823 に答える
0

HTMLはトップダウンで解析されます。関数は、tabsレンダリングされる前に呼び出されたIDを参照します。

また、インポートから、JQueryの依存関係がすべて同じバージョンであることも明らかではありません。

これがSSCCEです：

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>

  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">1</a></li>
      <li><a href="#tabs-2">2</a></li>
      <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">
      <p>Text 1</p>
    </div>
    <div id="tabs-2">
      <p>Text 2</p>
    </div>
    <div id="tabs-3">
      <p>Text 3</p>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</body>
</html>

次の点に注意してください。

  1. タグ内のJQueryUIテーマ<head>。この例では「ベース」を使用しました。

  2. メインのJQueryJSファイルは、スクリプトの一番下に移動し、JQueryUI拡張JSファイルの前に宣言されています。

  3. JQuery UI拡張JSファイルは、スクリプトの一番下に移動し、メインのJQueryJSファイルの後に宣言されています。

  4. コンテナーのtabs関数を呼び出すJavascriptのブロックは、コンテナーがHTMLで作成された後、およびJQuery JS依存関係がロードされた後、スクリプトの位置に移動されました。

  5. すべてのバージョン番号は、JQueryの依存関係について一致しています。

于 2017-02-23T01:51:47.680 に答える
-1

できるだけ本文の終わりに近いスクリプトにリンクすることをお勧めします。

スクリプトはHTMLが読み込まれる前に実行されているため、呼び出したときに、ページにofが$("#tabs").tabs()付いた要素はまだありません。idtabs

スクリプトをページの最後に移動してみて、それが役立つかどうかを確認してください。

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
       </ul>
       <div id="tabs-1">
           <p>Content 1.</p>
       </div>
       <div id="tabs-2">
           <p>Content 2.</p>
       </div>
       <div id="tabs-3">
           <p>Content 3.</p>
       </div>
   </div>
   <script src="jquery-1.7.js"></script>
   <script src="jquery.ui.core.js"></script>
   <script src="jquery.ui.widget.js"></script>
   <script src="jquery.ui.tabs.js"></script> 
   <script>
       $(function() {
           $( "#tabs" ).tabs();
       });
   </script>
</body>
</html>
于 2011-11-29T10:08:01.923 に答える
-1

ページにjqueryjavascriptを2回ロードしていないことを完全に確認してください。複数回ロードする場合、または2つの異なるバージョンのスクリプトをロードする場合は、この問題が発生します。

于 2013-06-27T14:14:44.747 に答える
-2

私はこれと同じ問題を抱えていました、そしてこれは私のためにそれを解決しました：

<a href="#divdata" data-ajax="false">link</a>

于 2015-07-14T20:33:09.857 に答える
-3

jquery-uiスクリプトを呼び出すのを忘れました：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
于 2011-11-29T10:35:07.380 に答える