javascript - 单击链接时页面向下滚动

Question

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

我正在使用此 jquery 代码隐藏主 div 并显示与单击的链接对应的 div。 main info div 和 main 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 不会反射(reflect)显示的 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();   
});