Javascript 我的网站的所有内容（其他页面）都位于同一选项卡下，除非用户单击选项卡

我对我新发布的网站有意见。一旦网站加载，它就会显示所有内容，包括段落、其他页面的视频等。。在我的例子中，在一个单独的选项卡下是HOME选项卡。但一旦单击任何选项卡，它就会自动修复。请看

所以，这是个问题！我希望以前修复的内容不应等待用户单击

现在我很清楚我的设计。我没有使用多页链接。我将所有内容都存储在主索引文件中，并使用以下jQuery代码在单击相应选项卡后将它们重定向到相应的部分：

请帮助我改进代码，以便我的页面可以按需要加载

我想我的问题与这段代码有关：

    /*Make the tabs work-begins*/
$(document).ready(function(){
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
        $('#all_contents>div').hide();
        var $this = $(this);
        var target = $this.attr('href');
        $(target).show();
        return false;
    });
 });
 /*Make the tabs work-ends*/

---

隐藏所有div，然后仅显示所有内容中的第一个div。这应该可以做到：

/*Make the tabs work-begins*/
$(document).ready(function(){

  //Hide all divs first
  $('#all_contents>div').hide();                 

  //Then show only first
  $('#all_contents>div').filter(':first').show();

  $('ul>li>a').click(function () {
        $('#all_contents>div').hide();
        var $this = $(this);
        var target = $this.attr('href');
        $(target).show();
        return false;
    });
});
/*Make the tabs work-ends*/

---

如果您想在开始时隐藏所有内容，则应将通过单击“主页”添加的css样式应用于html，而不是在js加载时应用：

$('ul>li>a').click(function () {
    $('#all_contents>div').hide();
    var $this = $(this);
    var target = $this.attr('href');
    $(target).show();
    return false;
 });
});

因此，这将隐藏除通过添加样式显示单击的页面之外的所有页面：无；内联到所有选定元素。因为页面加载时不会隐藏这些内容，所以该站点只有在单击链接后才能工作。您也应该这样做，但将样式作为规则添加到css中，而不是添加到衬里中：

#all_contents > div {
  display:none;
}

---

很好，我的朋友，我做到了，工作很好。对你有很多的爱和尊重！不过，我有100多张图片要上传到Web服务器。你能告诉我最简单的上传方式吗。我还没有做，因为我不知道最好的方法。最后检查您帮助修复的最终外观：好吧，您可以将它们压缩到单个文件中，上载zip，然后从服务器上解压缩；谢谢，你的回答也很好。我只是先尝试了阿米特的答案，结果成功了。但是我会记住你的建议，以备进一步使用。干杯，他们都是相同的答案tbh，唯一的区别是我的将立即应用，而阿米特的将应用于JS执行，但鉴于你的网站完全依赖JS，这不是一个真正的问题。