点击链接时页面向下滚动

Question

单击我的链接时，页面向下滚动时遇到问题。我很确定这是因为浏览器认为该链接应该是页面上某个区域的锚点。

我使用此 jquery 代码来隐藏主 div 并显示与单击的链接相对应的 div。 css 中的 main info div 和 main info2 div 是相同的。唯一不同的是里面的文字。

$(document).ready(function(){
$("#home").click(function(){
 $("#main_info2").hide();
 $("#main_info").show();
});
$("#info").click(function(){
 $("#main_info").hide();
 $("#main_info2").show();
});
$("#gyms").click(function(){
 $("#main_info").hide();
 $("#main_info2").show();
 });
$("#contact").click(function(){
 $("#main_info").hide();
 $("#main_info2").show();
});
});

这是我的导航列表：

<ul>
  <li><a href="#home" id="home"><img src="main home page/purhome.jpg"></a></li>
  <li><a href="#info" id="info"><img src="main home page/purinfo.jpg"></a></li>
  <li><a href="#gyms" id="gyms"><img src="main home page/purgyms.jpg"></a></li>
  <li><a href="#contact" id="contact"><img src="main home page/purcontact.jpg"></a></li>

当我单击信息链接时，例如，主页 div 隐藏并显示信息 div，但页面由于

href="#info"

而向下滚动。如果我将其更改为

href="#"

，则无需滚动即可正常工作，但是，如果仅使用

"#"

，浏览器 url 不会反映显示的 div。

例如，我希望浏览器显示

http://google/index.php#info

而不仅仅是

http://google/index.php#

。

有什么想法吗？

Answer 1

这是你的问题：

在这一行中：

<a href="#home" id="home"><img src="main home page/purhome.jpg"></a>

您正在设置一个链接，该链接确实会滚动到页面上的某个区域，在本例中滚动到其自身。

href="#home"

表示：单击此链接时，使带有

id

的

home

的元素可见。

实际点击的链接带有

id

的

home

。

因此它确保其内部的任何内容都是可见的，浏览器通常会向下滚动页面到具有指定

id

的特定元素。这解释了这种行为。

在您的情况下，您可以删除链接上的

href

属性，这应该可以修复它。

编辑

获得所需行为的最简单方法是将

id

更改为如下所示：

HTML

<ul>
  <li><a href="#home" id="home-link"><img src="main home page/purhome.jpg"></a></li>
  ...
</ul>

JavaScript

$("#home-link").click(function() {
  $("#main_info2").hide();
  $("#main_info").show();
});
...

您甚至可以将

id

的

main_info

更改为

home

，以确保单击链接后

main_info

（或随后的

home

）可见，如果这就是您所追求的行为。

编辑2 - 读取哈希解决方案

HTML

<ul>
  <li><a href="#home"><img src="main home page/purhome.jpg"></a></li>
  ...
</ul>
<div id="home">This is the tab content for the "home" tab.</div> 

链接上不需要

id

，但在

<div>

或用于创建选项卡内容的任何元素上设置一个。现在，链接上的

href

属性将确保与下面的 JavaScript 结合发生正确的事情，该 JavaScript 捕获点击并根据哈希值显示正确的选项卡。

JavaScript

$("a").click(function() {
  // Hide all tab content elements.
  $('some-selector-which-selects-all-tab-content-elements').hide(); 
  // Show only the tab content element with an id equal to the hash value.
  $(window.location.hash).show();   
});    

Answer 2

由于您将点击事件处理程序分配给 a 标记，因此无需在代码中使用“href”属性：

<a id="home">

Answer 3

这可能是我的网站上曾经发生过的现金问题，要解决该问题，请对数学设置进行排名并清除所有现金，希望它能解决问题