隐藏页面项目然后显示时出错答案

【问题标题】：Error when hiding page items then displaying隐藏页面项目然后显示时出错
【发布时间】：2015-12-16 02:13:30
【问题描述】：

我试图在页面中隐藏一个 id，然后在页面上加载所有 javascript 后显示。我正在使用的 javascript 再次显示内容是：

$(document).ready(function() {
   $("#HomePage")[0].style.visibility = "visible";
   $('#HomePage').addClass('animated fadeIn'); 
   $("#CategoryPage")[0].style.visibility = "visible";
   $('#CategoryPage').addClass('animated fadeIn'); 
}

我使用的css是

#HomePage { visibility:hidden; }
#CategoryPage { visibility:hidden; }

和主页的html

<html>
 <body>
  <section id="HomePage" class="main-content">
   ...
  </section>
 </body>
</html>

以及分类页面的html

<html>
 <body>
  <section id="CategoryPage" class="main-content">
   ...
  </section>
 </body>
</html>

这适用于主页 - 最初隐藏 div 然后显示，但是当我出于某种原因转到类别页面时，javascript 没有运行。我在两个页面上都收到错误，但我不确定这是否会影响它，因为它仍在主页上运行 - 未捕获的类型错误：无法读取未定义的属性“样式”。有人有什么想法吗？

【问题讨论】：

可以在问题中包含html 吗？
我已经添加了我用于两个页面的 html

标签： javascript jquery html css

【解决方案1】：

#HomePage 是否存在于 #CategoryPage 上？如果我正确理解了您的问题，它将尝试在#CategoryPage 上查找#HomePage 并确实将其声明为undefined。

如果您使用的是 jQuery，则以下内容应该可以工作。

$(document).ready(function() {
      $("#HomePage").css('visibility', 'visible');
      $('#HomePage').addClass('animated fadeIn');
      $("#CategoryPage").css('visibility', 'visible');
      $('#CategoryPage').addClass('animated fadeIn');
    }

【讨论】：

no #HomePage 仅存在于主页上，#CategoryPage on 存在于类别页面上。为什么类别部分没有运行？有没有办法解决这个问题？
@AlexMurray 我会编辑我的答案，我认为只要使用 jQuery 的方法就可以解决它。

【解决方案2】：

您的问题可能出在访问 [0] 索引时。如果 '#HomePage' 或 '#CategoryPage' 不存在，那么它将引发错误，因为数组中的第一项不存在。试试这个...

$(document).ready(function() {
   $("#HomePage").css("visibility", "visible"); 
   $('#HomePage').addClass('animated fadeIn'); 
   $("#CategoryPage").css("visibility", "visible"); 
   $('#CategoryPage').addClass('animated fadeIn'); 
}

jQuery 会将 css() 应用于所有匹配的项目（如果不匹配，则不应用）。

【讨论】：