脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 模拟超链接的用户单击

使用JQuery和CSS模拟超链接的用户单击事件的实现代码

 更新时间：2012年05月23日 15:45:19   作者：  
使用JQuery和CSS模拟超链接的用户单击事件的实现代码，需要的朋友可以参考下
在正式开始本文之前，先来简单介绍下HTML的<a>标签：使用<a>标签，我们可以在HTML页面上定义锚（anchor），锚有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
本文的内容与锚的第一种用法有关。
复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

// 单击spanAGo，调用超链接的单击事件
$('#spanAGo').click(function () {
$('#aGo').click();
});
});
</script>
</head>
<body style="font-size: 12px;">
<form id="form1" runat="server">
<div>
<a id="aGo" href="https://www.jb51.net/">脚本之家</a>
<br />
<br />
<span id="spanAGo" style="border: 1px solid black;">点击我，将调用以上超链接的单击事件</span>
</div>
</form>
</body>
</html>

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

点击超链接，页面可以正常跳转；但点击标签，页面却不可以跳转；以上，在IE8和Chrome里都无法跳转（其他浏览器未测试）。所以，接下来要实现的效果，就是在点击标签的时候让页面跳转（也就是在调用超链接的单击事件时，让页面跳转），且写的代码要少，且最好是在一个地方处理，一个项目不可能就一个页面，一个页面不可能就一个超链接，且不能做的太死，怎么说锚的另一个作用是书签，别链接是可以跳转了，锚的书签作用被屏蔽了，且……。

Main.css
复制代码 代码如下:

a.forward
{
}

Main.js
复制代码 代码如下:

/// <reference path="jquery-1.4.1-vsdoc.js" />
$(document).ready(function () {
// 使超链接支持click事件，方便JavaScript调用
$('a.forward').click(function () {
location.href = $(this)[0].href;
return false;
});
});

修改过后的页面源码如下：
复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Web.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="Styles/Main.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/Main.js"></script>
<script type="text/javascript">
$(document).ready(function () {

// 单击spanAGo，调用超链接的单击事件
$('#spanAGo').click(function () {
$('#aGo').click();
});
});
</script>
</head>
<body style="font-size: 12px;">
<form id="form1" runat="server">
<div>
<a id="aGo" class="forward" href="https://www.jb51.net">脚本之家</a>
<br />
<br />
<span id="spanAGo" style="border: 1px solid black;">点击我，将调用以上超链接的单击事件</span>
</div>
</form>
</body>
</html>

运行一下（截图略），点击标签，页面完美跳转，(*^__^*) 嘻嘻好了，最后来总结一下，模拟超链接的用户单击事件，我们需要做的就是：
导入外部CSS文件，Main.css，导入外部JavaScript文件Main.js（必须在导入JQuery文件之后导入）；
给超链接添加CSS类“forward”；
然后3是什么呢？然后想不出来然后了。
最后祝大家敲代码愉快。

首发：博客园->剑过不留痕
您可能感兴趣的文章:

相关文章

  • Jquery $.map使用方法实例详解

    Jquery $.map使用方法实例详解

    这篇文章主要介绍了jJquery $.map使用方法实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 自写的一个jQuery圆角插件

    自写的一个jQuery圆角插件

    下面介绍自己写的一个jQuery圆角的插件，功能非常简单。目前只能实现1px的固定弧度的圆角矩形边框。
    2010-10-10
  • JQuery手速测试小游戏实现思路详解

    JQuery手速测试小游戏实现思路详解

    这篇文章主要介绍了JQuery手速测试小游戏实现思路详解,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • jquery插件bxslider用法实例分析

    jquery插件bxslider用法实例分析

    这篇文章主要介绍了jquery插件bxslider用法,以实例形式较为详细的分析了bxslider插件的使用步骤与相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • jQuery validate 验证radio实例

    jQuery validate 验证radio实例

    这篇文章主要介绍了jQuery validate 验证radio实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • jQuery中用on绑定事件时需注意的事项

    jQuery中用on绑定事件时需注意的事项

    本篇文章主要介绍了jQuery中用on绑定事件时需注意的事项，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • EasyUI的TreeGrid的过滤功能的解决思路

    EasyUI的TreeGrid的过滤功能的解决思路

    这篇文章主要介绍了EasyUI的TreeGrid的过滤功能的解决思路,需要的朋友可以参考下
    2017-08-08
  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    ajax技术在做表单数据传值非常棒，给用户带来很好的用户体验度，同时，使用jquery可以简化开发，提高效率。下面给大家介绍jquery ajax 如何向jsp提交表单数据，需要的朋友可以参考下
    2015-08-08
  • jQuery插件boxScroll实现图片轮播特效

    jQuery插件boxScroll实现图片轮播特效

    本文给大家分享的是使用jQuery插件Boxscroll来实现简单的图片轮播特效的代码，非常简单实用，有需要的小伙伴可以参考下。
    2015-07-07
  • 写出高效jquery代码的19条指南

    写出高效jquery代码的19条指南

    讨论jQuery和javascript性能的文章并不罕见。然而，本文我计划总结一些速度方面的技巧和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验
    2014-03-03

最新评论