用javascript 转换外部链接样式

javascript|链接|转换

用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。

但用css有弊端:
1、只支持FireFox等对web标准支持很好的浏览器。
2、只能判断链接,不能判断锚点或javascript。如遇到<a href="javascript:void(0);">就无能为力了。

这里可以结合js来完成,首先写一个样式:
a.other:link,a.other:visited,a.other:active
  {
     background:url("external.gif") no-repeat top right;
     padding-right:15px;
  }

再写一个js,但js要考虑到链接的多样性,如上面提到的javascript、锚点等。 如果是图片链接,就不要应用样式了。

<script type="text/javascript">
     window.onload = function()
     {
       var aList = document.getElementsByTagName('a');
       var iCount = aList.length;
       for(var i = 0;i<iCount;i++)
       {
      
         if(!chkMyLink(aList[i].href,aList[i].innerHTML))
         {
           aList[i].className ='other';
         }
       }
     }
   
    //s是链接的url,innerhtml是链接文本
     function chkMyLink(s,innerhtml)
     {
        if(innerhtml.replace( /^\s*/,"").match(/^\<img/gi)) return true;
       var reg = /^http\:\/\//gi;
       if(s.match(reg))
       {
          reg = /^http\:\/\/www.webjx.com/gi;
          if(s.match(reg))
          {
            return true;
          }
          else
          {
            return false;
          }
       }
      return true;
     }
  </script>
现在可以看到效果了。

时间: 2024-12-22 09:27:45

用javascript 转换外部链接样式的相关文章

技巧分析:用javascript 转换外部CSS超级链接样式

css|javascript|技巧|链接|转换 用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接. 但用css有弊端: 1.只支持FireFox等对web标准支持很好的浏览器.2.只能判断链接,不能判断锚点或javascript.如遇到<a href="javascript:void(0);">就无能为力了. 这里可以结合js来完成,首先写一个样式:a.other:link,a.other:visited,a.othe

用CSS属性选择器控制链接样式

css|控制|链接 有时我们可能希望内部链接与外部链接显示不同的样式,如外部链接.我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开.我们可能会这样做: .external{   background:url(images/external.gif) no-repeat right top;  padding-right:12px;} 然后给每一个外部的链接应用该CSS,当然,这样做并不是不可以,只是太繁琐. 那有没有好的办法来实现

网页设计小技巧:用CSS制超级链接样式

css|技巧|链接|设计|网页|网页设计 有时我们可能希望内部链接与外部链接显示不同的样式,如外部链接.我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开.我们可能会这样做:.external{background:url(images/external.gif) no-repeat right top;padding-right:12px;}然后给每一个外部的链接应用该CSS,当然,这样做并不是不可以,只是太繁琐. 那有没有好的办

html-移动端WEB 关于DIV中加载一个外部链接的页面(例:www.baidu.com)

问题描述 移动端WEB 关于DIV中加载一个外部链接的页面(例:www.baidu.com) 如题 我试过AJAX请求,但是不成功不知道代码是否有问题 $.ajax({ url:"http://www.baidu.com/", type:"post", dataType:"html", success:function(data){ $("#main").html(data); } }); 也试过iframe标签,不过这个标签

easyUI 访问不了 http://开头的部分外部链接

问题描述 在tabs 中,添加一个tab 后,把tab 的href 设置成外部链接,有部分可以访问, 有一部分不可以访问.代码如下:<div title="Tab1" style="padding:20px;" href="http://wwww.hao123.com"></div>这一句访问不了..<html><head><meta http-equiv="Content-Type

jquery Mobile入门—外部链接切换示例代码_jquery

1.内部链接是通过在<a>标签内将href属性值设为#+id的形式,外链则是在<a>中增加rel属性,并将属性值设为external,如:<a href="about.html" rel="external">3i Studio</a> 2.外部链接切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD H

外部链接对于旅游网站要掌握好广泛度

随着经济的发展和人们生活的富裕,旅游业也飞速发展.据有关统计,1999年,我国全年共接待海外游客7270万,国内出游人数达7.19亿人次,旅游业总收入逾4000亿元人民币.据世界旅游组织预测,中国 将成为21世纪全球最大的旅游市场.进入2000年,随着国家扩大内需政策的进一步推动,以"五一"为龙头的假日旅游经济更是异常火爆,拉动了中国旅游市场的整体繁荣.与此同时,旅游行业电子商务也成为旅游业乃至互联网行业的热点之一,它的赢利前景更是为业界所看好.中国目前与旅游相关的网站大大小小已有65

搜狗浏览器如何快速打开外部链接

安装时设置快速打开外部链接方法:在搜狗高速浏览器安装过程中,有一个步骤可以设置快速打开外部链接,如下图所示,勾选此处即可. 菜单选项中设置快速打开外部链接方法:点击菜单栏工具选项,然后点击搜狗高速浏览器选项;在常规的基本设置中,点击"设置搜狗高速浏览器为默认"按钮即可,如下图所示. 注:如果您电脑上安装了安全防护软件,在设置时可能会弹出风险的提示框,您选择"允许操作"即可,如下图所示.

细分讲解网站外部链接建设多样化技巧

网站优化中外部链接建设是极其重要的一个环节,外部链接讲究多样性.广泛性自然增长,所以这也成了很多seoer的瓶颈,究竟该如何做才能做到多样广泛性呢? 如何自然增长呢?今天我们就来细分讲解一下这个话题. 首先百度现在每一次的更新都是针对更高质量的内容筛选,之所以说自然增长,百度也希望我们的网站外链是自然的增长和用户自然的传播,当然这个愿望是非常美好的,不过现实是残酷的!我们做优化如何不去做链接,埋头做内容等着用户自己给我的去传播链接,那我们只有等死的份了,所以,我们从幻想中醒来,就要模仿用户的行为