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

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

我正在使用这个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#。

任何想法？

来源

2013-05-07 TheNameHobbs

我很困惑。你到底在用什么做href？你是说你不想让它在点击时向下滚动到那个div？ – tay10r 2013-05-08 00:11:14

这是你的问题：

在这一行：

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

来源

2013-05-08 00:16:17

这是有效的！谢谢。 – TheNameHobbs 2013-05-08 02:53:37

我现在所遇到的一个问题是，我点击主页上的信息链接。主要的div消失，现在第二个div显示。该URL说localhost/index.php＃info。但是，当我刷新时，页面可以回到显示主div但保持相同的网址。所以你有主div，但url表示你在信息页面 – TheNameHobbs 2013-05-08 03:03:04

是的，你可以通过用JavaScript读取哈希（＃之后的位），然后使用jQuery触发点击链接在页面加载完成后关联'id'。有关示例代码，请参阅[此答案]（http://stackoverflow.com/a/16074578/1846192）。你的情况应该是'$（'＃'+ window.location.hash +'-link'）。click（）;'。这是一个更好的方法，这样你就不需要你当前的jQuery代码。 – 2013-05-08 03:08:12

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

<a id="home">

来源

2013-05-08 00:16:02

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

回答

相关问题