php道勤 发表于 2014-10-17 09:58:32

美工教程:教你使用<a>标签实现页内跳转

美工教程:教你使用<a>标签实现页内跳转
淘宝装修时,大家是不是想实现这样一个功能,点击链接进入另一个页面,但要自动跳转到页面的某处,而不是一打开就是页面头部。比如店铺做一些大型活动时,一般都会做一个950通栏的活动专题页,这个专题页分为几个部份,我们需要在首页做几个链接,让客户点击不同的链接自动跳转到专题页相对应的部份。曾经,某三金冠店铺也多次采用了这种方法做活动专题页。本站昨天发布的那款宝贝PK模块,效果展示也是采用的这种方法,点击链接直接跳转到对应的模块。想要实现这个功能,真的非常简单,我们只需要用到<a>标签的name属性。首先,通俗一点说下实现的原理,在你需要跳转到的地方做一个锚,为这个锚起一个名字,然后在链接的后面加上这个锚名字即可,一点链接,浏览器就会自动跳转到这个锚了。
具体步骤如下:1、点击源码,在你需要跳转的地方,输入<a name="taobaoux"></a>(taobaoux就是锚名字,随便自己起,但必须是英文)2、在你的超链接中,输入 <a href="http://tbux.taobao.com/#taobaoux"></a>即可
这里的名字必须和上面的名字一样,而且请注意上面的name是没有#号的,http://tbux.taobao.com/请改成你自己的店铺地址,当然,如果只是页内跳转的话,那就不需要加前面的店铺地址,直接<a href="#taobaoux"></a>即可
对html有点熟悉的朋友,应该都知道a标签中的name属性和id属性都可以实现页内跳转,那么,我们应该使用name属性还是id属性呢?要想弄明白这个问题,我们必须先了解name属性和id属性的区别,简单一点说,id属性就是name属性的升级版本,在正常的html开发中,建议是两个属性都用上。但请注意!在淘宝装修中,你不需要用id属性,只需要用name属性即可。因为我之前已经说过了,在淘宝里,所有的的标签都不支持id属性,这是因为淘宝考虑到标签的id属性会和淘宝官方的标签id冲突。
ok,该写的都写完了,明天休息,准备出去好好放松一下,白天不在线,晚上就会回来了。

页: [1]
查看完整版本: 美工教程:教你使用<a>标签实现页内跳转