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”属性：

<a id="home">

Answer 2

这是你的问题：

在这一行：

<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的{{1}}更改为main_info，以确保在点击链接后可以看到home（或main_info然后），这就是你所追求的行为。

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

<强> HTML

home

链接上不需要<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(); });

单击链接时页面向下滚动

2 个答案: