点击第二个选项，jquery不会工作，除非我点击页面上的其他任何东西

clicking on second option jquery wont work onless i click on anything elese on page

本文关键字：其他 任何东 工作 选项 第二个 jquery 非我      更新时间：2023-09-26

我的Jquery有一个小问题。我想知道为什么它不工作。

例如

我的头部有两个div标签，分别包含HOME和Products

我试图做内部链接与jquery的div标签HOME和PRODUCTS

<body>
<div id="#header_container">
<div>
<a href="#home_content"> <span id="home_select"> HOME </span></a>
</div>
<div>
<a href="#product_content"> <span id="product_select"> PRODUCTS </span></a>
</div>
</div><!--header_content end-->
<div id="home_content"> BLABLABLABLABLABLABLA </div>
<div id="products_content"> BLABLABLABLABLABLABLA   </div>
 </body>

当我加载页面时，第一次点击HOME工作正常，第二次点击products工作后，我先点击HOME。

如果我必须加载页面并首先点击PRODUCTS，它将不起作用。如果我加载页面并在点击PRODUCTS之前点击页面上的任何其他内容，它将工作。

在刷新页面后简单地点击PRODUCTS不工作，除非我点击页面上的另一个功能。我不确定它为什么这样做。我需要一些帮助。

我的jquery代码是 
<head>
<script>
$(document).ready(function(){
if ($("#home_select").click(function(){$("html, body")
.animate({scrollTop:    $("#home_content").offset().top});
 }));
if ($("#product_select").click(function(){$("html, body")
.animate({scrollTop: $("#product_content").offset().top});
})); 
});
</script>
</head>

为点击事件添加动画试试这个，在你的链接中添加href="#":

  <script>
  $(document).ready(function(){
   $("#home_select").on("click", function(){
     $("html, body").animate({scrollTop: $("#home_content").offset().top});
    });
   $("#product_select").on("click", function(){
      $("html, body").animate({scrollTop: $("#products_content").offset().top});
   }); 

 </script>

你需要在产品前面加一个# -例如:

: 

<div>
    <a href="#products_content"> <span id="product_select"> PRODUCTS </span></a>
</div>

你的jQuery代码试图滚动到#product_content，但你的HTML提到products_content。你试过添加缺失的散列符号和s吗?

相关文章：