前段时间灏君突然问到那种同一页面跳转到不同位置是怎么实现的。当时没有想到该怎么做,后来在研究UPnP的时候,发现UPnP的介绍网站也有类似效果,如下面给出的例子。

同一页面上,跳转到不同位置,例子

http://developer.gnome.org/gupnp/unstable/glossary.html#state-variable

http://developer.gnome.org/gupnp/unstable/glossary.html#action

于是乎看了一下他的源代码,发现其实实现起来并不难,就是对“<a></a>”这一组标签的小应用。自己写了一个小demo测试一下。代码如下。

[html]
<html>
<head>
</head>
<body>
<a name="one"></a><!–作为到1的跳转标记–>
<p>
this is text <font color="red">one</font>
, <a href="test.html#two">goto_two</a><!–跳转去2–>
, <a href="test.html#three">goto_three</a><!–跳转去3–>
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="two"></a><!–作为到2的跳转标记–>
<p>
this is text <font color="red">two</font>
, <a href="test.html#three">goto_three</a><!–跳转去3–>
, <a href="test.html#one">goto_one</a><!–跳转去1–>
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="three"></a><!–作为到3的跳转标记–>
<p>
this is text <font color="red">three</font>
, <a href="test.html#one">goto_one</a><!–跳转去1–>
, <a href="test.html#two">goto_two</a><!–跳转去2–>
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

[/html]

 

最后的效果如如下,一开始是这样的

点击 goto_two 以后,则跳到同一页面的,test two所在位置,如下图所示

点击 goto three,类似效果,或者点击goto one又回到顶端。

好像也正好可以用到开源软件协会的社员管理平台上去,让用户登录以后直接跳转到自己所在的位置。想想那个如何实现。

 

2 Responses

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.