`
intocn
  • 浏览: 6160 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

用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.lemongtree.com/gi;
          if(s.match(reg))
          {
            return true;
          }
          else
          {
            return false;
          }
       }
      return true;
     }
  </script>
分享到:
评论

相关推荐

    JavaScript基础教程第8版

    2.9 使用JavaScript改进链接 25 2.10 使用多级条件 28 2.11 处理错误 30 第3章 第一个Web应用程序 33 3.1 用循环进行重复操作 33 3.2 将值传递给函数 37 3.3 探测对象 39 3.4 处理数组 40 3.5 ...

    JavaScript实战

    8.2 在新窗口中打开外部链接 221 8.3 创建新窗口 224 窗口属性 224 8.4 在页面上的一个窗口中打开页面 228 8.4.1 定制Greybox窗口的外观 231 8.4.2 教程:在页面中打开一个页面 232 8.5 教程:生成较大链接 235 8.5.1...

    精通JavaScript

    • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...

    精通javascript

    • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...

    JavaScript实用范例词典04-14

    7.29 使用外部的鼠标指针样式... 227 7.30 在超级链接上显示提示信息... 227 第8章 超链接篇.... 229 8.1 单击按钮链接到指定的网页... 229 8.2 定时前往其他页面... 230 8.3 随机显示网页... 231 8.4 取得...

    plugin-ClickableLinksPlus:Omeka Classic插件可将非HTML文本字段中的URL转换为»target ='_ blank'«可点击的超链接

    版本1.3:向外部链接添加“维基百科样式”图标的新选项。安装解压缩文件并重命名插件文件夹“ ClickableLinksPlus”。 然后像安装其他任何Omeka插件一样安装它。警告需要您自担风险使用它。 始终建议您备份文件和...

    tictactoe:TicTacToe游戏,具有实时游戏历史和精美的React js UI。 单击下面的链接实时播放!

    为此,您可以使用附加标志运行npm start : npm start -- -p 3000或直接编辑start脚本: parcel index.html -p 3000添加样式您可以在Javascript的任何位置使用带有简单ES2015 import语句CSS文件: import "./index....

    xheditor-1.1.14

    2. xhEditor进阶使用 ...说明:此函数可以在插件内部或者外部Javascript代码中进行调用 showModal:显示模式窗口 参数1:模式窗口的标题title 参数2:模式窗口的内容content 参数3:模式窗口的宽度w ...

    ASP.Net.Web程序设计

    在网页中使用CSS包括三种常用方式:将样式定义直接嵌入到标记符中、将样式定义嵌入到网页中以及将样式定义包含在外部CSS样式文件中. CSS(Cascading Style Sheet,层叠样式表)技术是一种格式化网页的标准方式,它扩展了...

    零基础学HTML CSS源代码

    链接外部CSS样式.html 链接外部CSS样式.html CSS控制DIV.html CSS控制DIV.html DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件...

    精通AngularJS part1

    85使用指令修改按钮样式219 编写一个按钮指令220 86理解AngularJS的组件指令222 编写一个分页指令222 为分页指令编写单元测试代码223 在指令中使用HTML模板224 从父作用域中隔离指令225 使用@插入属性226 ...

    34款经典Dreamweaver插件

    Text to SWF 类别:DW Command 把文档中选定的文字转换成SWF文件(奇妙的功能!) 增强DW的ASP+编码功能的插件 · ASP+ Dream 增强DW的ASP+编码功能的插件 ...根据分辨率不同载入不同的外部样式表

    超实用的jQuery代码段

    2.18 在新窗口中打开外部链接 2.19 jQuery实现outerHTML属性 2.20 实现带固定表头的表格 2.21 为表单内控件设定缺省数值和文本 2.22 防止单个页面重复提交按钮 2.23 取得列表控件选中的option对象 2.24 限制输入框仅...

    Dreamweaver 扩展

    calendarPopup 一个弹出日历表格,用以确保输入的日历是按照特定的格式进行输入的,主要特色包括:日历链接,按照需要的方式设定日历的格式,按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1...

    Java资源包01

    JCaptcha4Struts2 是一个 Struts2的插件,用来增加验证码的支持,使用时只需要用一个 JSP 标签 (&lt;jcaptcha:image label="Type the text "/&gt; ) 即可,直接在 struts.xml 中进行配置,使用强大的 JCaptcha来生成验证码...

    70款经典Dreamweaver插件

    calendarPopup 一个弹出日历表格,用以确保输入的日历是按照特定的格式进行输入的,主要特色包括:日历链接,按照需要的方式设定日历的格式,按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1...

    Dreamweaver 插件集

    一个弹出日历表格,用以确保输入的日历是按照特定的格式进行输入的,主要特色包括:日历链接,按照需要的方式设定日历的格式,按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1 插入.icon图标...

    java开源包8

    JCaptcha4Struts2 是一个 Struts2的插件,用来增加验证码的支持,使用时只需要用一个 JSP 标签 (&lt;jcaptcha:image label="Type the text "/&gt; ) 即可,直接在 struts.xml 中进行配置,使用强大的 JCaptcha来生成验证码...

    java开源包1

    JCaptcha4Struts2 是一个 Struts2的插件,用来增加验证码的支持,使用时只需要用一个 JSP 标签 (&lt;jcaptcha:image label="Type the text "/&gt; ) 即可,直接在 struts.xml 中进行配置,使用强大的 JCaptcha来生成验证码...

Global site tag (gtag.js) - Google Analytics