<! 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
