當點擊鏈接時，頁面向下滾動

點擊我的鏈接時，頁面向下滾動時出現問題。我很確定這是因爲瀏覽器認爲鏈接應該是頁面上某個區域的錨點。當點擊鏈接時，頁面向下滾動

我正在使用這個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

當點擊鏈接時，頁面向下滾動

回答

相關問題