Home Web Front-end HTML Tutorial How to use a tag href attribute and onclick event

How to use a tag href attribute and onclick event

Jan 25, 2018 am 11:21 AM
href onclick event

This time I will show you how to use the a tag href attribute and onclick event. What are the precautions when using the a tag href attribute and onclick event? Which ones, the following are practical cases, let’s take a look. The

a tag is mainly used to implement page jumps, which can be achieved through the href attribute or in the onclick event.

1

<a onclick="window.location.href=&#39;www.jb51.net&#39;" href="javascript:void(0);">PHP中文网</a>

Copy after login

This code is fine in mainstream browsers, but there will be a problem that it cannot jump under IE6. What is the reason for this?

javascript:void(0);

void(arg); can be understood as a function that always returns null, but its parameters cannot be empty. Its parameters can be any expression or even a function.

1

<a href="javascript:void(name = &#39;php中文网&#39;); alert(name);">测试</a>

Copy after login

Test

IE6 first runs the events bound to the DOM itself, such as onclick; if bubbling is not prevented, the href attributes will be executed sequentially. And void(0); does not need to execute any events, so IE6 tells the browser not to execute any events (overwriting previous actions), and terminating bubbling is equivalent to return false; so the browser does not execute any actions. So just stop the bubbling event within the onclick event.

1

<a onclick="window.location.href=&#39;http://www.jb51.net&#39;;return false;" href="javascript:void(0);">PHP中文网</a>

Copy after login

This way it can run normally under IE6.

Another way is to avoid using javascript:void(0); instead using #. The # in the href attribute originally means anchor point#name So when no anchor is specified, it will go to the top of the page. # has a specific meaning, and the default is #top. If there is content after #, it will be considered a tag and the corresponding tag will be jumped to there if found on the page. If it cannot be found, it will jump to the top of the page. If you do not want to jump, , you can use

,

is a meaningless label specification.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:
How to use horizontal line annotations and code comments in HTML


How to write flexible, stable, High-quality HTML and css code

##How to achieve the effect of clicking the button text into an input box, and clicking save to turn it into text

###

The above is the detailed content of How to use a tag href attribute and onclick event. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What do src and href mean? What do src and href mean? Aug 16, 2023 pm 05:00 PM

src and href are respectively, 1. src is the abbreviation of source, which is used to specify the path of external resources. It is usually used to embed external files, such as pictures, audios, videos, etc. The src attribute is generally used on img, script, iframe and other tags. ; 2. href is the abbreviation of hypertext reference, which is used to specify the path of the target resource of the hyperlink. It is usually used to link to external documents or other pages. The href attribute is generally used on tags such as a and link.

Event ID 4660: Object deleted [Fix] Event ID 4660: Object deleted [Fix] Jul 03, 2023 am 08:13 AM

Some of our readers encountered event ID4660. They're often not sure what to do, so we explain it in this guide. Event ID 4660 is usually logged when an object is deleted, so we will also explore some practical ways to fix it on your computer. What is event ID4660? Event ID 4660 is related to objects in Active Directory and will be triggered by any of the following factors: Object Deletion – A security event with Event ID 4660 is logged whenever an object is deleted from Active Directory. Manual changes – Event ID 4660 may be generated when a user or administrator manually changes the permissions of an object. This can happen when changing permission settings, modifying access levels, or adding or removing people or groups

Get upcoming calendar events on your iPhone lock screen Get upcoming calendar events on your iPhone lock screen Dec 01, 2023 pm 02:21 PM

On iPhones running iOS 16 or later, you can display upcoming calendar events directly on the lock screen. Read on to find out how it's done. Thanks to watch face complications, many Apple Watch users are used to being able to glance at their wrist to see the next upcoming calendar event. With the advent of iOS16 and lock screen widgets, you can view the same calendar event information directly on your iPhone without even unlocking the device. The Calendar Lock Screen widget comes in two flavors, allowing you to track the time of the next upcoming event, or use a larger widget that displays event names and their times. To start adding widgets, unlock your iPhone using Face ID or Touch ID, press and hold

In JavaScript, what is the purpose of the 'oninput' event? In JavaScript, what is the purpose of the 'oninput' event? Aug 26, 2023 pm 03:17 PM

When a value is added to the input box, the oninput event occurs. You can try running the following code to understand how to implement oninput events in JavaScript - Example<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text&quot

How to implement calendar functions and event reminders in PHP projects? How to implement calendar functions and event reminders in PHP projects? Nov 02, 2023 pm 12:48 PM

How to implement calendar functions and event reminders in PHP projects? Calendar functionality and event reminders are one of the common requirements when developing web applications. Whether it is personal schedule management, team collaboration, or online event scheduling, the calendar function can provide convenient time management and transaction arrangement. Implementing calendar functions and event reminders in PHP projects can be completed through the following steps. Database design First, you need to design a database table to store information about calendar events. A simple design could contain the following fields: id: unique to the event

How to implement change event binding of select elements in jQuery How to implement change event binding of select elements in jQuery Feb 23, 2024 pm 01:12 PM

jQuery is a popular JavaScript library that can be used to simplify DOM manipulation, event handling, animation effects, etc. In web development, we often encounter situations where we need to change event binding on select elements. This article will introduce how to use jQuery to bind select element change events, and provide specific code examples. First, we need to create a dropdown menu with options using labels:

How to use onclick in HTML How to use onclick in HTML Nov 13, 2023 am 10:07 AM

By setting the onclick attribute to a JavaScript function or behavior, you can perform an action when the user clicks on an element. Whether you use the onclick attribute directly in the HTML tag or dynamically add and modify the onclick attribute through JavaScript, you can handle click events.

What are the commonly used events in jquery What are the commonly used events in jquery Jan 03, 2023 pm 06:13 PM

Commonly used events in jquery are: 1. Window events; 2. Mouse events, which are events generated when the user moves or clicks the mouse on the document, including mouse clicks, move-in events, move-out events, etc.; 3. Keyboard events, Events are generated every time the user presses or releases a key on the keyboard, including key press events, key release events, etc.; 4. Form events, such as the focus() event will be triggered when an element gains focus, and the focus() event will be triggered when it loses focus. The blur() event is triggered, and the submit() event is triggered when the form is submitted.

See all articles