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 回答