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

我试图在页面中隐藏一个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没有运行。我在两个页面上都收到了一个错误，但我不确定这是否会影响它，因为它仍在主页上运行-未捕获类型错误：无法读取未定义的属性"style"。有人有什么想法吗？

#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');
    }

访问[0]索引时可能会出现问题。如果"#HomePage"或"#CategoryPage"不存在，则它将抛出一个错误，因为数组中的第一个项不存在。试试这个。。。

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

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

相关内容

最新更新

热门标签：