增强用户体验之文章内的链接

我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新窗口中打开，而内部链接在本身的页面打开。但WordPress默认所有的链接都是在自身页打开的。那要怎么才能把外部的链接强行在新窗口中打开呢？今天给大家说下怎样实现给文章的外部链接添加一个标识，并且在符合W3C标准的前提下在新窗口中打开。

而内部链接在本身页面打开。

我们知道，链接A的属性里有一个target=”_blank”。我们可以通过给链接添加这个属性来让链接在新窗口中打开。但这样为每个链接添加一个这样的属性并不是件轻松的事。而且还有个弊端：给A标签里面加target=”_blank”针对W3C标准是不合法的。那该如何解决呢？别急！跟着我来一步一步解决问题。

第一步：我们先要让文章里的链接全部在新窗口中打开：

第二步：给文章里的链接添加一个标识符
这个我们可以直接在CSS里定义

现在文章里所有的链接都在新窗口中打开了，并且还带了一个标识的图标。但这并不是我们想要的，因为我们只想把标识符给外部链接并且内部链接是在自身窗口中打开的。继续下一步；

第三步：去掉内部链接的标识符

做这一步前我们首先要做的是区分文章里的链接是内部链接还是外部链接。这个可以用jQuery的选择器来区分，以我的BLOG为例：内部链接的href里肯定会包含我的域名（http://leotheme.cn）里的leotheme这个字符串。知道了这个我们就可以写代码了：

好了，现在内部链接没有标识符了，但还是会在新窗口中打开，继续。。。

第四步：让外部链接在新窗口中打开，内部链接在自身窗口打开

这一步的实现有一点点的复杂，当然如果你对jQuery非常熟悉的话还是非常简单的。前面我们在第一步已经实了文章所有链接在新窗口中打开了。但我们其实需要的只是外部链接在新窗口中打开而已，但外部链接的形式多样。变数太多，用JQ无法区别开来，但我们可以很容易区别内部链接，于是我们换下思路，“外部链接=除内部链接以外所有的链接”。在第一步的基础上我们只要排除了内部的链接就行了。但怎样排除呢。我们知道：HTML4.0增加了一个新属性：rel，这个属性用来说明链接和包含此链接页面的关系，以及链接打开的目标。我们可以给内部链接添天一个rel属性用来区分外部链接，然后用JQ的选择器排除内部链接。看下面的代码，我们在第三步的基础上修改下：

现在所有的内部链接都有rel=”inlinks”这个属性了。接着我们用JQ来排除内部链接在新窗口中打开，排除的方法是，如果链接的rel不具有inlinks这个属性的话，那么它就是一个外部链接，然后我们给这个外部链接添加一个click事件，点击后在新窗口中打开。

NOW…现在文章的内部链接会在自身窗口中打开，而外部链接会在新窗口中打开并且还有个标识符了。效果见我的BLOG；写完了？好像是？效果也实现了？其实还没完，效果是实现了，但还有一些特殊的情况没有考滤进来。比如文章中的图片链接，锚链接…OK，继续排除这两个链接。

第五步：排除图片和锚链接

这下是真的完了。看起来好像写了很多代码，很复杂。其实很简单。我们把它优化下，写在一起。最后的完整代码是这样的：

两行代码。对，就是这么简单。jQuery的选择器很强大…