Before starting this article, let's briefly introduce the HTML <a> tags: using <a> tags, we can define anchors on an HTML page, and anchors have two uses:
Create a link (or hyperlink) to another document by using the href attribute
Create a bookmark inside a document by using the name or ID attribute (that is, you can create a link to a document fragment)
The content of this article is related to the first use of anchors.
Copy Code code as follows:
<%@ 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 ">
<title></title>
<script type= "Text/javascript" src= "Scripts/jquery-1.4.1.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Click Spanago to call the hyperlink's Click event
$ (' #spanAGo '). Click (function () {
$ (' #aGo '). Click ();
});
});
</script>
<body style= "FONT-SIZE:12PX;" >
<form id= "Form1" runat= "Server" >
<div>
<a id= "AGo" href= "http://www.jb51.net/" > cloud-Habitat Community </a>
<br/>
<br/>
<span id= "Spanago" style= "border:1px solid black;" > Click on me to call the above hyperlink Click event </span>
</div>
</form>
</body>
The above code works as shown in the following illustration:
Click on the hyperlink, the page can be normal jump, but click on the tab, the page can not jump, the above, in IE8 and Chrome can not jump (other browsers did not test). So the next thing you want to achieve is to make the page jump when you click on the tag (that is, when you call the hyperlink's Click event, let the page jump, and write less code, and preferably in a place to deal with, a project can not be a page, a page is not a hyperlink, and can not do too dead, How to say that another role of anchor is a bookmark, do not link is can jump, anchor the role of the bookmark is blocked, and ...
Main.css
Copy Code code as follows:
Main.js
Copy Code code as follows:
<reference path= "Jquery-1.4.1-vsdoc.js"/>
$ (document). Ready (function () {
Enable hyperlinks to support the Click event to facilitate JavaScript calls
$ (' A.forward '). Click (function () {
Location.href = $ (this) [0].href;
return false;
});
});
After the revised page source code is as follows:
Copy Code code as follows:
<%@ 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 ">
<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 () {
Click Spanago to call the hyperlink's Click event
$ (' #spanAGo '). Click (function () {
$ (' #aGo '). Click ();
});
});
</script>
<body style= "FONT-SIZE:12PX;" >
<form id= "Form1" runat= "Server" >
<div>
<a id= "AGo" class= "forward" href= "http://www.jb51.net" > Cloud-dwelling Community </a>
<br/>
<br/>
<span id= "Spanago" style= "border:1px solid black;" > Click on me to call the above hyperlink Click event </span>
</div>
</form>
</body>
Run (cut Tullo), click on the label, the page Perfect Jump, (*^__^*) Hee, finally to sum up, analog hyperlink user Click event, we need to do is:
Import the external CSS file, main.css, import the external JavaScript file Main.js (must be imported after the jquery file is imported);
Add CSS Class "forward" to the hyperlink;
Then what is 3? And then I can't figure it out.
Finally I wish you all a happy knock code.
Starting: Blog Garden-> Sword without leaving a mark
