Before starting this article, we will briefly introduce the HTML <a> tag: using the <a> tag, we can define the anchor on the HTML page ), there are two types of anchor usage:
Use the href attribute to create a link (or hyperlink) pointing to another document)
By using the name or id attribute, you can create a bookmarks inside a document (that is, you can create a link pointing to a document segment)
The content of this article is related to the first use of anchor.
Copy codeThe Code is 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">
<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 (){
// Click spanAGo to call the Click Event of the hyperlink
$ ('# SpanAGo'). click (function (){
$ ('# AGo'). click ();
});
});
</Script>
</Head>
<Body style = "font-size: 12px;">
<Form id = "form1" runat = "server">
<Div>
<A id = "aGo" href = "http://www.jb51.net/"> foot home </a>
<Br/>
<Br/>
<Span id = "spanAGo" style = "border: 1px solid black;"> click me to call the Click Event of the preceding hyperlink </span>
</Div>
</Form>
</Body>
</Html>
The running effect of the above Code is shown in:
When you click a hyperlink, the page can jump normally. However, when you click a tag, the page cannot jump. The above cannot jump in IE8 or Chrome (not tested in other browsers ). Therefore, the effect to be achieved is to jump the page when you click the tag (that is, when you call the hyperlink click event, let the page Jump), and write less code, it is best to process it in one place. A project cannot be a page, a page cannot be a hyperlink, and it cannot be too dead, you can jump to another link. The bookmarks of the anchor are blocked and .......
Main.cssCopy codeThe Code is as follows: a. forward
{
}
Main. jsCopy codeThe Code is as follows: // <reference path = "jquery-1.4.1-vsdoc.js"/>
$ (Document). ready (function (){
// Enable hyperlinks to support click events for JavaScript calls
$ ('A. forward '). click (function (){
Location. href = $ (this) [0]. href;
Return false;
});
});
The source code of the modified page is as follows:Copy codeThe Code is 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">
<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 (){
// Click spanAGo to call the Click Event of the hyperlink
$ ('# SpanAGo'). click (function (){
$ ('# AGo'). click ();
});
});
</Script>
</Head>
<Body style = "font-size: 12px;">
<Form id = "form1" runat = "server">
<Div>
<A id = "aGo" class = "forward" href = "http://www.jb51.net"> foot home </a>
<Br/>
<Br/>
<Span id = "spanAGo" style = "border: 1px solid black;"> click me to call the Click Event of the preceding hyperlink </span>
</Div>
</Form>
</Body>
</Html>
Run (omitted), click the tag, and the page jumps perfectly. (* ^__^ *). Finally, let's summarize the event that the user who simulates the hyperlink clicks, what we need to do is:
Import external CSS files, main.css, and the external JavaScript file Main. js (the file must be imported after the JQuery file );
Add the CSS class "forward" to the hyperlink ";
Then what is 3? Then I cannot figure it out.
Finally, I wish you a pleasant coding experience.
Starter: blog Park-> no trace of sword