Home > Web Front-end > JS Tutorial > Implementation code for simulating user click events of hyperlinks using JQuery and CSS_jquery

Implementation code for simulating user click events of hyperlinks using JQuery and CSS_jquery

WBOY
Release: 2016-05-16 17:53:39
Original
1045 people have browsed it

Before officially starting this article, let’s briefly introduce the tag of HTML: Using the tag, we can define an anchor (anchor) on the HTML page. There are two ways to use anchors:
By using href Attribute, create a link (or hyperlink) to another document
By using the name or id attribute, create a bookmark inside the document (that is, you can create a link to a document fragment)
The content of this article is related to Related to the first use of anchors.

Copy code The code is as follows:

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











Script Home




Click me and the above hyperlink will be called Click event





Above The running effect of the code is as shown below:

When you click on the hyperlink, the page can jump normally; but when you click on the label, the page cannot jump; above, it cannot jump in IE8 and Chrome (other browsers have not been tested). Therefore, the next effect to be achieved is to make the page jump when the label is clicked (that is, when the click event of the hyperlink is called, let the page jump), and the code to be written should be less, and it is best to be in It can be processed in one place. A project cannot have only one page, and a page cannot have only one hyperlink, and it cannot be too rigid. Another function of anchors is bookmarks. Other links can be jumped. The bookmark function of anchors is blocked, and….

Main.css
Copy code The code is as follows:

a.forward
{
}

Main.js
Copy code Code As follows:

///
$(document).ready(function () {
// Make the hyperlink support click events to facilitate JavaScript calls
$('a.forward').click(function () {
location.href = $(this)[0].href;
return false;
});
});

The modified page source code is as follows:
Copy code The code is as follows:

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












脚本之家




点击我,将调用以上超链接的单击事件





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

首发:博客园->剑过不留痕
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template