<a>标签可定义锚。一个锚有两种用法：

  • 通过使用 href 属性，创建一个到另外一个文档的链接
  • 通过使用 name 或 id 属性，创建一个文档内部的书签

如果是在 HTML 5 中，它定义为：超链接，用于从一个页面连接到另一个页面。此时，name 属性将由 id 代替。

它的属性在 W3school 中有详细说明。

一.链接：
通常格式：

<a href="url">text</a>

1. <a> 标签中调用 JS 方法（点击事件）
有以下几种方法：比如调用 mapObj.zoomOut(); 方法。
1)

<a href="mapObj.zoomOut();">缩小</a>

此种方法在传递 this 等参数时很容易出现问题，而且 javascript: 协议作为 <a> 的 href 属性时不仅会导致不必要的window.onbeforeunload 事件的触发，还会使 IE 中的 gif 动画图片停止播放。W3C 标准不推荐在 href 里面执行 javascript 语句。

2)

<a href="javascript:void(0);" onclick="mapObj.zoomOut();">缩小</a>

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

3)

<a href="javascript:;" onclick="mapObj.zoomOut();">缩小</a>

这种方法同 2)，区别在于执行了一条空的 JS 代码。

4)

<a href="#" onclick="mapObj.zoomOut();">缩小</a>

这种方法也是网上很常见的代码，# 是标签内置的一个方法，代表 top 的作用。所以用这种方法点击后网页返回到页面的最顶端，但是对于一个很长的页面而言，可能会在跳转时产生页面滑动的效果。

5)

<a href="#" onclick="mapObj.zoomOut();">缩小</a>

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

2.在新页面跳转
在标签内添加 target="_blank" 属性，比如：

<a href="http://www.test.com/" target="_blank">test</a>

 target 属性是在何处打开目标 URL。取值如下：
  • _blank - 在一个新的未命名的窗口载入文档
  • _self - 在相同的框架或窗口中载入目标文档
  • _parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
  • _top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

3.<td>标签中添加超链接

  只能在<td></td>标签内添加超链接，而不能在<tr></tr>中添加（不符合标准）。如果直接使用<a href></a>无效，可通过以下代码实现：

<td style="cursor:pointer;" onclick="window.open('http://blog.163.com/hdyl_8603','_blank')">网址 ：<a href=''>hdyl的blog</a></td>

二.书签：

一般用于同一文档内部的跳转。
被跳转的部分，添加标签：

<a name="test"></a>

添加链接的部分，添加标签：

<a href="#test"></a>

三.样式： 
如果需要修改某些内容的链接样式，可设置一个 class 而将这些内容放在这个 class 内。比如：

<head></head> 内设置样式：

<style type="text/css">
html,body{height:100%;margin:0;padding:0;font-size:15px;}
/*右键菜单样式*/
.triangle-border {
position:relative;
padding:15px;
border:2px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/*右键菜单项样式，triangle-border 内的 <a> 标签样式*/

.triangle-border A:link{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:visited{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:active{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:hover{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
</style>

<body></body> 中应用：

<div class="triangle-border">

<table>

<tr>

<td><a href="javascript:void(0);" onclick="mapObj.zoomIn();">放大</a></td>

</tr>

</table>

</div>

效果：

 
 
文章来源：http://blog.163.com/hdyl_8603/blog/static/34622429201321241215120/

JS中的<a>标签的更多相关文章

  1. 在js中拼接<a>标签,<a>标签中含有onclick事件，点击无法触发该事件

    我们在<a>标签中添加事件一般是onclick="editUser()" 这样添加,在html页面上是行的通的 但是如何你是在js中拼接<a>标签并在< ...

  2. js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点

    <pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx&qu ...

  3. Three.js中的div标签跟随(模型弹框)

    目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...

  4. springboot下html的js中使用shiro标签功能

    在js中直接使用shiro标签是不行的 比如 下面有个小技巧

  5. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  6. js中的script标签属性

    HTML <script> 元素用于嵌入或引用可执行脚本. 在html中插入一个script标签 <script src="index.js" sync cros ...

  7. js中模拟a标签的点击事件

    var a = document.createElement('a'); a.target = "_blank"; a.href = "personal"; a ...

  8. js中使用s（c）标签

    在js或者jquery中使用s标签,其实并不难理解,s标签也只是一个标签而已,当你想象成js+s标签=js+html标签就理解了 例如: <script type="text/java ...

  9. 如何在 js 代码中使用 jsp 标签或 Java 代码

    JSP 标签还是很方便的,比如 Struts.Spring 等提供给我们的 JSP 标签,可以用它们来获取变量或进行一些计算.比如 struts2 的 <s:url value="/a ...

随机推荐

  1. 安装站点时出现“连接数据库出现数据库server或登录password无效，无法连接数据库，请又一次设定”解决方法

    在安装站点时出现  "连接数据库出现数据库server或登录password无效,无法连接数据库,请又一次设定"  可是数据库username和password是正确的,在serv ...

  2. 只有 assignment、call、increment、decrement 和 new 对象表达式可用作语句

    错误信息:只有 assignment.call.increment.decrement 和 new 对象表达式可用作语句: 分析:发生这种情况一般是在赋值时把“=”写成了“==”,例如:textBox ...

  3. Rancher学习笔记----在UI界面添加主机页面无法正常显示

    今天在学习rancher添加主机的时候,遇到了一个小问题,但是困扰老娘一上午 问题描述:在点击添加主机的时候,页面有跳转,但是页面显示为空,没有任何可选项.如下正常界面: 解决办法是:请换个浏览器

  4. dep包安装与依赖库

    安装 点击下载 .deb 包:使用sudo dpkg -i xxx.deb 命令安装 依赖库问题 用sudo apt-get install -f解决依赖问题,解决后重新运行dpkg -i安装命令 验 ...

  5. BZOJ5197:[CERC2017]Gambling Guide(最短路,期望DP)

    Description 给定一张n个点,m条双向边的无向图. 你要从1号点走到n号点.当你位于x点时,你需要花1元钱,等概率随机地买到与x相邻的一个点的票,只有通过票才能走到其它点. 每当完成一次交易 ...

  6. P1316 丢瓶盖（二分+贪心）

    思路:都在注解里 #include<iostream> #include<algorithm> using namespace std; ; int a[maxn], n, m ...

  7. day07----字符编码解码、文件操作（1）

    字符编码: 什么是字符编码? 字符编码是将人识别的字符转换成计算机能识别的二进制字符(01),转换的规则就是编码表. 人能识别的字符串  与  计算机能识别的二进制字符 两者之间对应关系构成的结构称为 ...

  8. RestFul风格API(Swagger)--从零开始Swagger

    引言:随着技术的革新,现在的系统基本上都是前后端分离,并且在各自的道路上越走越远,而前后端之间通信或者联系的桥梁就是API,而这里基于RESTful风格的API框架就来了!欲知后事如何,客官别急,往下 ...

  9. AutoMapper快速上手

    一.什么是AutoMapper  AutoMapper是一个简单的对象映射框架(OOM),对象映射原理是把一种类型的输入对象转换为不同类型的输出对象,通俗讲就是通过一些约束讲一种类型中数据自动映射到另 ...

  10. tomcat的Jsp执行

    Tomcat 会把为JSP页面创建的Servlet源文件和class类文件放置在“<TOMCAT_HOME>\work\Catalina\<主机名>\<应用程序名> ...