利用jQuery实现侧边栏Tab切换效果。今天正好看到我爱水煮鱼的博客里有篇关于jQuery的另一应用,正好拿来一起分享。" />
现在的位置: 首页 > Wordpress > WP技巧 > 正文
利用jQuery实现链接在新窗口打开
2010年08月04日 WP技巧 ⁄ 共 1416字 评论数 28 ⁄ 被围观 6,732+

关于jQuery自己也是似懂非懂,前面就介绍过利用jQuery实现侧边栏Tab切换效果。今天正好看到我爱水煮鱼的博客里有篇关于jQuery的另一应用,正好拿来一起分享。

我们经常会在文章中插入一些链接,一般我们都希望用户点击后在新的窗口(或新的选项卡)打开链接,所以我们都会给链接添加target="_blank"属性,如果链接比较多的话,一个一个添加,显然令人厌烦。而且虽然target="_blank"符合w3c的XHTML 1.0 Transitional标准,但却不符合XHTML 1.0 Strict标准,所以添加这个属性显然是要被废弃的。

而w3c标准建议里也给出了用rel="external"来替代target="_blank",不过仍然需要定义external属性,也就是说先要写一个js文件,内容如下:

function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank"; }
}
window.onload = externallinks;

保存为external.js文件上传到服务器,然后再在footer.php或者其它地方调用此文件:

<script type="text/javascript" src="http://blog.ifenwen.com/wp-content/themes/shadowblue/external.js"></script>;

所以说这种方法也不可取,仅仅为了符合标准,不仅没有减少工作量,否则还增加了不少。再者添加rel="external"一样还是令人头疼。

不过现在有了更好的方法,那就是利用jQuery。有了jQuery,我们只需要几句代码即可搞定。

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external")
.attr("target","_blank");

利用这样的代码就给链接标签增加一个target属性,并且给他赋值为 _blank。当然上述的语句是不包括自己网站的链接,就是说如果引用的是自己网站的链接,也需要在新窗口打开的话,就要将not部分的内容去掉,变成$("a[href*='http://']:,[href*='https://']:")这样就不用一个一个手动输入了,而且这样代码是标准的,并且外部链接在新窗口打开。

至于jQuery的使用方法,具体可以参考以前的利用jQuery实现侧边栏Tab切换效果。简而言之,就是先加载jQuery库;然后在js文件写入控制代码;最后调用js文件。



目前有 28 条留言 其中:访客:27 条, 博主:0 条

  1. 老实人博客 : 2010年09月08日15:38:06  21楼

    原来如此。我目前可以不用它们。先学习一下。


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×