HTML 标签的 href 属性

我们常用的在a标签中有点击事件:
1. a href="javascript:js_method();"

这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

2. a href="javascript:void(0);" οnclick="js_method()"

这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3.a href="javascript:;" οnclick="js_method()"

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4.a href="#" οnclick="js_method()"

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5.a href="#" οnclick="js_method();return false;"

这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。

综合上述,在a中调用js函数最适当的方法推荐使用:
a href="javascript:void(0);" οnclick="js_method()"
a href="javascript:;" οnclick="js_method()"
a href="#" οnclick="js_method();return false;"




实例

href 属性规定链接的目标:

href="http://www.w3school.com.cn">W3School

制作文本链接

一个引用其他文档的简单 标签可以是下列形式:

W3School 在线教程

浏览器用特殊效果显示短语“W3School 在线教程”(通常是带下划线的蓝色文本),这样用户就会知道它是一个可以链接到其他文档的超链接。就像这样:

W3School 在线教程

用户还可以利用浏览器中的选项来自己指定文本颜色、设置链接前和链接后链接文本的颜色。

提示:可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

制作图像链接

更复杂的锚还可以包含图像。下面这个 LOGO 是一个图像链接,点击该图像,可以返回 W3school 的首页:



上面的代码会为 W3School 的 LOGO 添加一个返回首页的超链接:

W3School 在线教程

大多数图形浏览器都会在作为锚的一部分的图像周围放置特殊的边框。通过在 标签中把图像的 border 属性设置为 0 可以删除超链接的边框。也可以使用 CSS 的边框属性来全局性地改变元素的边框样式。



注:url中加斜杠”/”和不加斜杠的区别:

设webapp为web程序包名

通常来说,不加斜杠的形式(如”example.jsp”)请求的是相对于当前页面路径的资源 http://localhost:8080/webapp/examole;

加斜杠的形式(”/example.jsp”)请求的是服务器根目录下的资源,完整的url是由服务器地址+/example构成的:http://localhost:8080/example(不带上下文context)。如果页面不是放在服务器跟目录而是web程序包下,则不能使用加斜杠的形式。



你可能感兴趣的:(前端)