单击链接时页面向下滚动

Question

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

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

$(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();
});
...

您甚至可以将main_info 的id 更改为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">