1

Sean CatchpoleによるidTabsの起動に問題があり、Chromeはモジュールを正しくロードし、コンソールにエラーはありませんが、jQueryが機能せず、リンクによってidTabsによって隠されていないテキストに移動します-したがって、javascriptまたはjQueryは機能しないと思いますが、問題はどこにありますか？これが私が持っているコードです

ヘッドセクション：

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

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.min.js"></script>

    <script type="text/javascript"> 
    $("#usual1 ul").idTabs(); 
    </script>

</head>

HTML：

    <div id="usual1" class="usual"> 
  <ul> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
  <div id="tab1">This is tab 1.</div> 
  <div id="tab2">More content in tab 2.</div> 
  <div id="tab3">Tab 3 is always last!</div> 
</div>
4

3 に答える 3

2

$ を作成して google-chrome-console (または firebug) で Enter キーを押すだけで、Jquery が機能しているかどうかを簡単にテストして確認でき、その部分が機能しています。http://www.sunsean.com/idTabs/から jquery-tabs をダウンロードし、scripts/jquery.idTabs.js に (min 以外のファイル) を含めました。

次のコードを使用すると動作します:¨

<!DOCTYPE html>
<body>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="scripts/jquery.idTabs.js"></script>


</head>
<body>
 <div class="usual"> 
  <ul class="idTabs" > 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
<div style="display:block;" id="tab1">This is tab 1.</div> 
<div style="display:none;" id="tab2">More content in tab 2.</div> 
<div style="display:none;" id="tab3">Tab 3 is always last!</div> 
</div> 
</body>
</html>

私が見ることができるものから、あなたが書いている： $("#usual1 ul").idTabs(); しかし、それは必要ありません。必要なのは、タブがある ul 要素に id="idTabs" を配置することです。次に、タブ (li 要素) に #tab1 という名前を付けてから、テキストに同じ名前の ID を付けます。

したがって、1コンソールで$を使用してjqueryが機能していることを確認してください（または、取得に失敗したというエラーが表示されます）。2 script タグ内のコードを削除します。3 class="idTabs" を ul 要素に入れます。4、楽しんでください。

編集: ul (またはその前の div) で class="idTabs" にする必要があります。また、おそらく style="display:none" で div を隠したいと思うでしょう。それらはプレス時にポップアップします。

于 2012-07-18T12:00:28.993 に答える
1

私はあなたがこのようにあなたのjqueryを書かなければならないと思います、

$(document).ready(function() {
   $("#usual1 ul").idTabs(); 

 });

コードを呼び出す関数はありません。

于 2012-07-18T11:54:40.823 に答える
0

idTabs には Ajax に関する問題があります。同じページで idTabs と Ajax コードを使用している場合、両方で問題が発生する可能性があります。たとえば、idTabs と Sphider-Plus の ajax オート コンプリート機能は使用できず、どちらも機能しません。

回避策があります。ここで確認してください- 基本的に互換性の問題を解決します。

idTabs コードの例を挙げると、実際には非常にうまく書かれており、jQuery 名前空間内にあります。この問題は、プラグインが依存関係をチェックしてから、それ自体をロードして依存関係をロードしようとすると発生します。とにかく、修正を確認してください。

また、この JavaScript を使用して idTabs をアニメーション化することもできます。

        <script type="text/javascript"> 
          jQuery("#usual1 ul").idTabs(function(id){  
            jQuery(id).fadeIn(500); 
          }); 
        </script>
于 2013-01-20T01:37:59.487 に答える