当点击链接时，页面向下滚动

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="#"，它可以正常工作，但不会滚动，但是，浏览器网址并不反映如果仅使用"#"显示的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到home的id确保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

$("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

既然你要指定单击事件处理程序的一个标签有没有必要使用“HREF”在你的代码属性：

<a id="home">