×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

jQuery模拟超链接的用户单击事件

在正式开始本文之前，先来简单介绍下HTML的标签：

使用标签，我们可以在HTML页面上定义锚（anchor），锚有两种用法：

通过使用 href 属性，创建指向另外一个文档的链接（或超链接）

通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）

本文的内容与锚的***种用法有关。

 
 
 
 
    
  
  
  
  
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %> 
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6.       
    7. 
  
  
  
  
  7.       
    8. 
  
  
  
  
  8.       
    9. 
  
  
  
  
  9.          $(document).ready(function () {  
    10. 
  
  
  
  
  10.    
    11. 
  
  
  
  
  11.              // 单击spanAGo，调用超链接的单击事件  
    12. 
  
  
  
  
  12.              $('#spanAGo').click(function () {  
    13. 
  
  
  
  
  13.                  $('#aGo').click();  
    14. 
  
  
  
  
  14.              });  
    15. 
  
  
  
  
  15.          });  
    16. 
  
  
  
  
  16.       
    17. 
  
  
  
  
  17.   
    18. 
  
  
  
  
  18.   
    19. 
  
  
  
  
  19.       
    20. 
  
  
  
  
  20.      
     
    21. 
  
  
  
  
  21.          剑过不留痕 - 博客园 
    22. 
  
  
  
  
  22.           
    23. 
  
  
  
  
  23.           
    24. 
  
  
  
  
  24.          点击我，将调用以上超链接的单击事件 
    25. 
  
  
  
  
  25.      
 
  •       
  •   
  •   

    • 以上代码的运行效果如下图所示：

    点击超链接，页面可以正常跳转；

    但点击标签，页面却不可以跳转；

    以上，在IE8和Chrome里都无法跳转（其他浏览器未测试）。

    所以，接下来要实现的效果，就是在点击标签的时候让页面跳转（也就是在调用超链接的单击事件时，让页面跳转），且写的代码要少，且***是在一个地方处理，一个项不可能就一个页面，一个页面不可能就一个超链接，且不能做的太死，怎么说锚的另一个作用是书签，别链接是可以跳转了，锚的书签作用被屏蔽了，且……。

     
 
 
 
      
  
  
  
  
    1. a.forward  
      2. 
  
  
  
  
    2. {  
      3. 
  
  
  
  
    3. }  
      4. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. Main.js   
      2. 
  
  
  
  
    2.  ///   
      3. 
  
  
  
  
    3.    
      4. 
  
  
  
  
    4.  $(document).ready(function () {  
      5. 
  
  
  
  
    5.    
      6. 
  
  
  
  
    6.      // 使超链接支持click事件，方便JavaScript调用  
      7. 
  
  
  
  
    7.      $('a.forward').click(function () {  
      8. 
  
  
  
  
    8.          location.href = $(this)[0].href;  
      9. 
  
  
  
  
    9.          return false;  
      10. 
  
  
  
  
    10.      });  
      11. 
  
  
  
  
    11.    
      12. 
  
  
  
  
    12.  }); 
      13.

    修改过后的页面源码如下：

     
 
 
 
      
  
  
  
  
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %> 
      2. 
  
  
  
  
    2.    
      3. 
  
  
  
  
    3.   
      4. 
  
  
  
  
    4.   
      5. 
  
  
  
  
    5.   
      6. 
  
  
  
  
    6.       
      7. 
  
  
  
  
    7.       
      8. 
  
  
  
  
    8.       
      9. 
  
  
  
  
    9.       
      10. 
  
  
  
  
    10.       
      11. 
  
  
  
  
    11.          $(document).ready(function () {  
      12. 
  
  
  
  
    12.    
      13. 
  
  
  
  
    13.              // 单击spanAGo，调用超链接的单击事件  
      14. 
  
  
  
  
    14.              $('#spanAGo').click(function () {  
      15. 
  
  
  
  
    15.                  $('#aGo').click();  
      16. 
  
  
  
  
    16.              });  
      17. 
  
  
  
  
    17.          });  
      18. 
  
  
  
  
    18.       
      19. 
  
  
  
  
    19.   
      20. 
  
  
  
  
    20.   
      21. 
  
  
  
  
    21.       
      22. 
  
  
  
  
    22.      
       
      23. 
  
  
  
  
    23.          剑过不留痕 - 博客园 
      24. 
  
  
  
  
    24.           
      25. 
  
  
  
  
    25.           
      26. 
  
  
  
  
    26.          点击我，将调用以上超链接的单击事件 
      27. 
  
  
  
  
    27.      
     
  •       
  •   
  •   

    • 运行一下（截图略），点击标签，页面***跳转，(*^__^*) 嘻嘻

    好了，***来总结一下，模拟超链接的用户单击事件，我们需要做的就是：

    导入外部CSS文件，Main.css，导入外部JavaScript文件Main.js（必须在导入JQuery文件之后导入）；

    给超链接添加CSS类“forward”；

    然后3是什么呢？然后想不出来然后了。

    ***祝大家敲代码愉快。


    分享名称：jQuery模拟超链接的用户单击事件
    网页路径：http://cdbrznjsb.com/article/dhdeocs.html

    其他资讯

    让你的专属顾问为你服务