1

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

我正在使用这个 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 不会反映仅使用"#".

例如，我希望浏览器显示http://google/index.php#info而不仅仅是http://google/index.php#.

有任何想法吗？

4

2 回答 2

1

由于您将单击事件处理程序分配给 a 标签，因此无需在代码中使用“href”属性：

<a id="home">
于 2013-05-08T00:16:02.943 回答
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_infohomemain_infohome

编辑 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();   
});
于 2013-05-08T00:16:17.303 回答