Use of the onclick and href in the a tag in HTML

Source: Internet
Author: User

The following code executes the SUBGO () function,

<a href= "javascript:void (0)" onclick= "Subgo ()" > Point me </a>

Here, javascript:void (0), does not have a substantial effect, it is just a dead link, the function that executes is subgo ().

<a href= "#" onclick= "Subgo ()" > Point me </a> with <a href= "javascript:void (0)" onclick= "Subgo ()" > Point me </a> Difference.

In fact #包含了一个位置信息默认的锚是 #top is the upper end of the page, and javascript:void (0) simply represents a dead link with no information. So it's best to use void when calling scripts (0)

href generally refers to a URL address, you can also call JavaScript, such as href= "javascript:xxx ();", recommended in the documentation: <a href= "javascript:void (0)" onclick= "xxx ();" >xx</a> But this approach sometimes creates strange problems in complex environments, try not to use JavaScript: protocol as the HREF attribute of a, This will not only lead to unnecessary triggering of window.onbeforeunload events, in IE will make GIF animated pictures stop playing.

We know that the onclick event of the link is executed first, followed by the action under the HREF attribute (page jump, or JavaScript pseudo-link), and if you do not want to perform the action under the HREF attribute, the onclick needs to return false, which is generally written onclick= " xxx (); return false; ".

Tabpane JS Source code, because the onclick does not return false, when the Ifrmae closed Tabpane will cause the href execution, the page shows a problem. The workaround is to copy the following code into the JSP using tab.

--------------------------------------------------------------------------------------------------------------- ---------------------------

As for the other buildings said "IE8", such as: "javascript:;", "javascript:void (0)", "Javascript:void (NULL)" are rejected "because there is no IE8 installed, dare not jump to conclusions."

--------------------------------------------------------------------------------------------------------------- ---------------------------

if the <a> tag is actually used in the actual application to respond to the onclick event.
It is recommended that you use the following three methods
1.<a href= "javascript:void (0)" onclick= "dosomething ()" >test</a>
2.<a href= "" onclick= "dosomething (); return false" >test</a>
3.<a href= "" onclick= "dosomething (); Event.returnvalue=false" >test</a>--------------------------------------------------------------------------------------------------Hyperlink <a The > tag represents a link point and is a shorthand for the English anchor (anchor). Its role is to connect the current position of text or pictures to other pages, text or images, which is well known, but about its grammatical structure may be a little known, and to live it must understand its grammatical structure. The basic syntactic structure of the <a> tag is:

<a
Class=type
Id=value
Href=reference
Name=value
Rel=same|next|parent|previous
Rev=value
Target=window
Style=value
Title=title
Onclick=function
Onmouseout=function
Onmouseover=function> Connection </a>
As you can see from the syntax structure of a tag, there are a number of parameters to choose from when setting up a hyperlink to achieve different link effects, which is a bit unexpected?!

Where class and ID options are used to set the type to which the link point belongs and the assigned ID number, which is usually not set. The two most commonly used parameters are href and name. where HREF is the acronym for Hypertext Reference, which is used to set the link address. The link address must be a URL address, and if no specific path is given, the default path is the same as the path of the current page. The file you link to is also divided into several situations: If you are an HTML file, open it directly in the current browser If the executable (. exe file) is executed or downloaded directly, we provide the downloaded file with this feature, and if it is a text file such as Word format, the file is opened in the browser and can be edited and processed.

Rel: Indicates the relationship of the set link: Rel=same indicates that the file to be linked is the same as this file, Rel=next indicates that the file to be linked is the next page, rel=parent that this file is the parent file of the file to be linked, and rel=previous that the file to be linked is the previous page.

Rev: It is used to set the reverse link.

Target: In the case of the frame window to set the link to which window, and target= "_bank" is a new window opens the Web page.

Title: Used to set the caption to be displayed when the link is selected.

OnClick: Corresponds to an event that triggers this event when the link point is clicked, and executes the corresponding subroutine.

onMouseOver: Similar to onclick, the corresponding event is triggered when the mouse moves over the link point.

onmouseout: The corresponding event is triggered after the mouse moves out of the town contact.

For a few examples:

<a href= "index.htm" > Back to Home </a>
<a href= "Sound.wav" > Play voice file </a>
<a href= "Javascipt.open ()" > Execute corresponding program </a>
<a herf= "Document.doc" > Open the corresponding document for processing </a>
Application Tips

1. Provide download files

A lot of users to write to ask, to provide the effect of downloading how to do. Actually, it's still a hyperlink, but the file for download must be uploaded to the website. Example: There is a "Web Tips" package for download, the file name is "Homepagejq.zip" and has been uploaded to the site, then this link code can write: <a href= "Homepagejq.zip" > click here to download "Web Tips" file package </a>.

2. Open a linked page in a new window

Set the value of "target" to "_blank". Example: Opening a new window opens the page "Aboutme.htm". The code that produces the effect is: <a href= "aboutme.htm" target= "_blank" > About me ......</a>.

3. Move the mouse over the link to display a line of descriptive text

You can get this effect by setting the value of the "title" parameter. Example: When the mouse moved to the "Huangshan Village" on this link, the show description "This is a Web page making skills of the professional website." The code for this link is this: <a href= "hscf.htm" title= "This is a professional website that introduces Web page making skills" > Huangshan Village </a>.

4. Move the mouse over a link to pop up a window

This is the effect of setting the onmouseover parameter. Example: When the mouse moves over a link, a window pops up and displays the mouse hover effect demo in the window! ”。 The code for this link is: <a href= "other pages. htm" onmouseover= "alert (' Mouse hover effect demo! ') ' > Links </a>. A similar method can be made when the mouse is pressed to pop up the display window, when the mouse left to pop up the prompt window effect.

5. Link to the specified content on this page

To implement a link to a portion of this page (that is, "in-file jumps"), you must specify the name of the link with the parameter name. Select a piece of text that you can name with the name parameter for the link to use. The so-called jump in the same file means that when the reader is reading a very long document, if only the content of a certain part of interest, you can use a jump-type reading. The basic format is:

<a href= "# Link Contact name" > Part II </a> The first section of the content ...
...........................................
<a name= "link Contact name" ></a> second part of the actual content ...
...........................................
So when you click on the "second part" hyperlink, it will automatically transfer to the "second part of the actual content" this place. The name of the link point defined by the "name" parameter can be arbitrarily taken, but the link name in the linked "href" parameter must be the same, and do not forget to precede it with "#".

6, links to other pages of the specified content location

method is similar to the previous example, but the name of the Web page is added to the link-point names in the "href" parameter. Example: There are two pages page1.htm and page2.htm, each page has two parts, now you want to make a hyperlink in page1.htm, press the link will go to the second part of page2.htm content. So we can do this, first in page2.htm the second part of the content begins to write the code: <a name= "link name" ></a>; in page1.htm write such a link code: <a href= " pagw2.htm# Link Contact Name ">page2 The second part of the content </a>.

7. Links to E_Mail

After clicking on a hyperlink, the email management software on the client will be launched to write to you. Example this line of code: <a href= "Mailto:[email protected]" > Please write to me </a>. Once you click on the "please write Me" link, the email management software (such as OE) will automatically start the letter function and the email address has been added to the recipient's address bar.

Links can not only be text as a carrier, but also to image as a carrier, and can be a part of the picture as a carrier, and can achieve these effects, the method is the same, the difference is only the carrier, that is, the link between the two square brackets in the middle of that part, so no longer another example.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.