JavaScript锚点 - 访问另一个HTML页面上的id

时间:2008-11-06 17:38:37

标签: javascript html anchor

我有两个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!");
});

两个和三个相同。

现在,如果我点击第一页上的按钮,它将始终显示 “one”的文字和图片,无论我点击哪个按钮。

但如果点击它,我想看到“两个”的图片和文字。

5 个答案:

答案 0 :(得分:2)

您要做的是在页面加载时模拟锚点击。由于您使用的是jQuery,因此最简单的方法(但最好的形式)如下:

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

将ondomready-event附加到窗口。获取id = 1的元素(使用jQuery,这将是'#one',与你的location.hash相同,在这种情况下非常方便),触发点击它。

您可能需要替换$(location.hash).click();使用$(location.hash).get(0).click()因为jQuery倾向于返回jQuery对象的数组。

但是在你的情况下更好的解决方案是拥有一个可以手动触发的事件处理程序,从而避免触发事件的需要,以及放下锚点并直接点击你的li。

此外,当您似乎想要做的是动态显示/隐藏内容时,为什么要加载第二页?在同一页面上做...

答案 1 :(得分:1)

#blastuffbla不是ID,而是位置哈希。 您可以使用以下方式访问它:

self.document.location.hash

如果您只想要使用哈希,那么它将返回#hash:

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

希望这有帮助

答案 2 :(得分:1)

标签没有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似乎是正确的。

答案 3 :(得分:0)

当您说“不同的ID”时,您如何在第2页设置锚点?第二页上的锚点应如下所示:

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

将其放在要在第二页上标记的文本上方。

答案 4 :(得分:0)

您要将页面滚动到ID“one”的位置吗?也许页面的内容太小,你不能在那里滚动。我的意思是有时浏览器无法将标有id的元素移动到画布的顶部,看起来像是在那里滚动。尝试在元素后面包含足够的空格,使其可以滚动到浏览器的顶部。

希望有所帮助。