JavaScript錨點-訪問另一個HTML頁面上的ID

Question

我有兩個html頁面，當您單擊第一個html上的某個內容時，它將轉到第二個html頁面。 我要做的是根據您在第一個html上單擊的內容來顯示文本。 不同的文本用不同的ID包裹。 這是我的寫法：

<a href="secondpage.html#one"></a>
<a href="secondpage.html#two"></a>
<a href="secondpage.html#three"></a>

我期望看到two.html加載ID為“ one”的文本，但是它不起作用，有人知道我做錯了嗎？

這是第二頁上的代碼：

<ul id="menu" class="aaa">
    <li><a id="one" href="#">one</a></li>
    <li><a id="two" href="#">two</a></li>
    <li><a id="three" href="#">three</a></li>
</ul>

我有一個JS文件來修改每個id：

$("one").observe('click', function() {
    $('Pic').writeAttribute('src',"picone.jpg");
    $('Bio').update("texthere!");
});

兩個和三個相同。

現在，如果我單擊第一頁上的按鈕，則無論單擊哪個按鈕，它都將始終顯示“一個”的文本和圖片。

但是，如果我單擊它，我想查看“兩個”的圖片和文字。

Answer 1

您要做的是在頁面加載時模擬對錨點的單擊。 由於您使用的是jQuery，因此最簡單的方法（但最好的方法是以下方法）：

$(window).observe('domready', function () {
    $(location.hash).click();
});

將ondomready事件附加到窗口。 獲取id = one的元素（使用jQuery時，它的位置為#one，與您的location相同。在這種情況下，hash非常方便），觸發對其的單擊。

您可能需要替換$（location.hash）.click（）;。 使用$（location.hash）.get（0）.click（），因為jQuery傾向於返回jQuery對象的數組。

但是，在您的情況下，更好的解決方案是讓事件處理程序可以手動觸發，從而避免觸發事件的需要，以及放下錨點並直接單擊您的li。

此外，當您似乎只想動態顯示/隱藏內容時，為什么還要加載第二頁？ 在同一頁面上做...

Answer 2

#blastuffbla不是ID，而是位置哈希。 您可以使用以下方式訪問它：

self.document.location.hash

如果您只想要哈希，則將返回#hash，您將使用：

self.document.location.hash.substring(1)

希望這可以幫助

Answer 3

標簽沒有ID，但是名稱用於處理Urls中的錨，但是您仍然需要ID來管理JS中的錨。 因此，您的清單應為：

<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>

您的JavaScript似乎正確。

Answer 4

當您說“不同的ID”時，如何在第二頁上設置錨點？ 第二頁上的錨點應如下所示：

<a name='one'></a>

將其放在您要在第二頁上標記的文本上方。

Answer 5

您是否要將頁面滾動到ID為“ one”的位置？ 頁面的內容可能太小，無法滾動到該頁面。 我的意思是有時瀏覽器無法將標有id的元素移動到畫布的頂部，並且看上去確實在其中滾動。 嘗試在元素之后包含足夠的空間以使其可滾動到瀏覽器頂部。

希望能有所幫助。