jquery 超链接 点击 javascript超链接

在那里，您可以愉快地浏览网站； 您单击一个链接，突然发现自己在另一个被要求下载文件的站点。 那里发生了什么？ 烦人，不是吗？ 必须有一种更好的方法来向您的访问者指示链接的去向以及文件的类型。 因此，为帮助解决此烦恼，我编写了一些JavaScript和CSS，在链接后（根据文件扩展名和位置而定）添加了很少的图标，以向用户指示他们将要处理的文档类型。加载。

您可以在此处下载代码，并查看示例 。

简要

创建此功能时，主要考虑因素是：

1. 简单–必须易于使用
2. 
   
3. 正常降级–在CSS或/和JavaScript被禁用的情况下
4. 
   
5. 最少地使用文件–只有一个JavaScript和一个CSS文件
6. 
   
7. 使其尽可能即插即用–可以将其快速添加到网站
8. 
   
9. 限制代码总量
10. 
    
11. 与所有现代浏览器（包括IE6）兼容
12. 
    

为什么要从纯CSS解决方案转变呢？

您已经可以使用属性选择器在CSS中完成此操作。 这是一个例子：

a[href$='.doc'] { 

  display: inline-block; 

  padding-left: 16px; 

  background: transparent url(images/icon_doc.gif) center right no-repeat; 

}

那么，当大多数现代浏览器仅使用CSS来显示图标时，为什么还要用脚本来实现呢？

答案很简单：IE6。 除IE6外，所有不错的浏览器都支持CSS3属性选择器……。 CSS的这种脚本编写使得IE6可以很好地播放。 实际上，它甚至可以在IE5.5中使用。

灵感与信誉

在开始之前，我想感谢famfamfam的Mark James出色且免费的Silk图标，我们将在本文中使用它。

另外，应归功于应得的荣誉：本文的灵感来自Alexander Kaiser的文章CSS的Iconize Textlinks with CSS ，而文章的灵感又来自Ask CSS Guy的CSS 超链接提示 。 此外，我使用了一些由SitePoint自己的James Edwards编写的出色功能，以及另外两个选自Core JavaScript库 （由Kevin Yank和Cameron Adams编写）的功能，并在SitePoint书《 Simply JavaScript 》中永存。

那么它是怎样工作的？

简而言之，我们将获取页面中的所有链接，计算出链接到的文件扩展名，然后在链接后添加适当的图标。 真好

要使其全部正常工作，涉及三个文件：

1. 包含链接的HTML页面index.html
2. 
   
3. 包含图标类iKonize.css的CSS文件
4. 
   
5. 将CSS类和图标添加到链接的JavaScript文件iKonize.js

快速启动方法

现在，如果您想回避“为什么”和“为什么”，而只想将其添加到页面中，则为以下简短版本：

1. 在页面标题中添加指向JavaScript和CSS文件的链接（更改文件引用以适合您的站点设置）。
   <link type="text/css" rel="stylesheet" href="iKonize.css"/>
<script type="text/javascript" src="iKonize.js"></script>
2. 
   
3. 将您的icons文件夹放在您的网站上，并确保iKonize.css文件中的url引用正确。
4. 
   
5. 从结束body标记之前包含的脚本标记调用JavaScript函数iKonize ，如下所示：
   <script type="text/javascript">iKonize();</script>
6. 
   

看–我告诉过您，使用起来很简单！

为简单起见，我选择在DOM加载后从HTML内部调用该函数。 还有其他使用JavaScript来实现此目的的方法，但它们超出了本文的范围。

完整说明

让自己感到舒适，我们将深入研究内部工作原理。

组态

本着使事情变得简单的精神，大多数设置已经为您完成。 仅在需要更改图标或文件扩展名时才需要更改配置。 有两个地方可以进行这些更改：JavaScript（iKonize.js）和CSS文件（iKonize.css）。

配置iKonize.js

在文件顶部，您将看到所有配置变量： classPrefix ， classExternal和classIconLoc 。

classPrefix
iKon_
classExternal
externalIconLoc
IndividualClassArray
txt
classPrefix
IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');
classArray
IndividualClassArray
classArray = Array(  

IndividualClassArray,  

Array('flash', 'swf', 'fla')  

);
url = parseURL(qualifyHREF(document.location.href)).hostname;
qualifyHREF
parseURL
document.getElementsByTagName("a"),
parseURL
qualifyHREF
linkHref = aElements[iv].href;       
oUrl = parseURL(qualifyHREF(linkHref)); 
fileExt = oUrl.extension; 
classArray
aElements = document.getElementsByTagName("a");  

iElements = aElements.length;  

  

for (iv = 0; iv < iElements; iv++) {  

  iLen = classArray.length;  

  for (ii = 0; ii < iLen; ii++) {  

      iArr = classArray[ii].length;  

        for (i = 0; i < iArr; i++) {  

            // Do we need to add an icon?  

          }  

     }  

}
if (fileExt == classArray[ii][i]) {      

    if (ii === 0) {  

       linkClass = fileExt;  

    }  

    else {  

       linkClass = classArray[ii][0];  

    }  

    bFound = true;  

addClass
if (bFound && linkClass !== '') {  

    addClass(aElements[iv], classPrefix + linkClass);  

}  

if (oUrl.hostname.indexOf(url) == -1) { // not our url  

    bExternal = true;  

}
if (bExternal) { //  an external link  

   img = document.createElement('img');  

   img.id = 'Newimg' + iv;  

   img.src = externalIconLoc;  

   img.alt = 'external site';  

   img.title = 'links to an external web site';  

   void (aElements[iv].appendChild(img));  

   oimg = document.getElementById("Newimg" + iv);  

   addClass(oimg, classExternal);  

}
iKon_
doc
.iKon_doc {  

  padding: 5px 20px 5px 0;  

  background: transparent url(icons/icon_doc.gif) no-repeat center right;  

}
.iKon_external{   

  padding: 5px 0 0 5px;  

  border: 0;  

}
classPrefix