分析一下连接元素的一般特点:
1、有下划线
2、鼠标移动上去会变成手型鼠标
3、点击之后会进入某一个页面(href属性)
4、可以设置目标窗口的名称(target属性)
接下来一步一步实现上边所举的特点,首先是下划线和鼠标移动上去会变成手型鼠标,这个很简单,用CSS即可,可以与脚本无关,请看示例:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
接下来是实现“点击之后会进入某一个页面”,可以给span元素增加一个属性href保存url,同时处理它的onclick事件,这就要用到刚才我说了半天的事件传递,思路是给window.document对象绑定一个onclick处理函数,如果事件来源对象的标签名(tagName)是span,它的class属性值为link,并且它拥有一个非空href属性,就调用window.open打开href属性所保存的url。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
点击上边示例代码所模拟出来的“连接”之后,浏览器会连接到无忧脚本论坛(http://www.51js.com),第三个特点也实现了。在这里特别说明一下:Firefox不支持直接使用src.href获取我们自定义的href属性,因此使用了IE和Firefox都支持的getAttribute(attributeName)方法,如果不存在则返回null。
最后的工作是增加target属性实现设置目标窗口的功能,要注意一点就是target属性是可有可无的,实现方法很简单,利用上边的实例就可以轻松实现,就是在window.open那里做一点点手脚,请看示例代码:










