1

クリックしてさまざまなコンテンツを表示できるシンプルなタブがあります。クリックすると、すべての #tabs div が非表示になり、クリックしたものが表示されます。JavaScript は次のとおりです。

$(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click( 
        function(){ 
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active'); 
        var currentTab = $(this).attr('href'); 
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });
});

そしてHTML：

<body>

<div id="container">
<div id="header"></div>
  <div id="tabs">
    <ul>
      <li class="firstTab"><a href="#tab-1">Tab 1</a></li>
      <li class="tabs"><a href="#tab-2">Tab 2</a></li>
      <li class="tabs"><a href="#tab-3">Tab 3</a></li>
      <li class="tabs"><a href="#tab-4">Tab 4</a></li>
    </ul>
    <div id="tab-1">
    <h3>Tab 1</h3>
    </div>

    <div id="tab-2">
      <h3>Tab 2</h3>
    </div>

    <div id="tab-3">
      <h3>Tab 3</h3>
    </div>

    <div id="tab-4">
      <h3>Tab 4</h3>
    </div>
  </div>
</div>
<div id="footer"></div>

</body>

html ファイルがハード ドライブにあり、次のようになっている場合は正常に動作します。

ここに画像の説明を入力

しかし、それを Dropbox に入れて開くと、次のようにすべて下に表示されます。

ここに画像の説明を入力

Dropbox でホストされている同じファイルが Firefox で正常に動作し、ハード ドライブ上のローカル ファイルが Chrome と Firefox の両方で正常に動作することに注意してください。Chrome を使用して Dropbox でホストされているファイルを開く場合にのみ発生します。この問題は、Chrome が http で転送されたファイルとローカル ファイルをどのように処理するかに関係している必要があります。私はそれについて何も知りません。アドバイスをいただければ幸いです。

4

1 に答える 1

1

Javascript コンソールに次のエラーがあります。

[ブロック] ' https://dl.dropboxusercontent.com/u/40929021/site/index.html ' のページは HTTPS 経由で読み込まれましたが、' http://ajax.googleapis.com/ajax/から安全でないコンテンツが実行されましたlibs/jquery/1.3.0/jquery.min.js ': このコンテンツも HTTPS 経由でロードする必要があります。

次のスクリプトをロードします。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

プレフィックスをhttp:省略すると、ページと同じプロトコルが使用されます。

また、jQuery の以前のバージョンにアップグレードするのはどうですか?

于 2013-11-14T21:37:12.890 に答える