Question

我有简单的标签，您可以在其间单击并查看不同的内容。单击隐藏所有#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文件在我的硬盘上时，它可以正常工作，如下所示：

enter image description here

但是当我把它放在我的Dropbox上并打开它们时，它们都显示在彼此之下：

enter image description here

请注意，相同的Dropbox托管文件在Firefox中运行良好，我的硬盘上的本地文件在Chrome和Firefox中都能正常运行。只有在使用Chrome打开Dropbox托管文件时才会发生这种情况。问题必然出在与Chrome如何处理使用http与本地文件传输的文件有关的问题上，我对此一无所知，所以请任何建议都很棒

Answer 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？

在线托管文件时，jQuery选项卡不会隐藏

1 个答案: