was ist der Unterschied zwischen <Taste onClick = ...> und <a href="#" onclick=.../>

Question

I find many times the pages use "a" tag and want to make it like a button. it's something like this:

<a href="#" class="button" onclick="...." /> 

I'm confusing about why not just use "button" tag? like this:

<button onclick="....">button</button> 

what is the difference between? I really want to learn it, thanks!

One more situation question:

Three "button-like < a > tag" as below:

Hint:

• Different one call ajax then get different period record
• Need to use onclick="location.replace()" because back to last page smoothly.

Original code:

<a href="url" class="btn" >Today</a> 

I have changed to:

<a href="#" onclick="location.replace(url)" class="btn" >Today</a> 

Consider about:

<button onclick="location.replace(url)">Today</button> 

What will you do in this situation? Is any incorrect to use button tag ?

Answer 1

Dies ist im Grunde ein historisches Artefakt.

Es stammt aus der Zeit, als es viel einfacher war, benutzerdefiniertes Styling auf einen Anker anzuwenden. Sie könnten einfach "Button-Looking" -Anker im Autoformat erstellen, indem Sie mehr Elemente im Anker selbst verwenden.

Heute, mit erweiterten CSS-Optionen und bessere Browser-Kompatibilität, ist dies nicht erforderlich. Wenn button das korrekte semantische Element ist, haben Sie keinen Grund, stattdessen a zu verwenden.

Verwenden Sie daher Anker für Links zu anderen Seiten. Es sollte immer eine href haben, anstatt nur # und onclick zu verwenden. Jetzt können Sie immer noch onclick verwenden - stellen Sie nur sicher, dass der href Sie zu denselben Daten leitet, die onclick tut. Dies ist sehr praktisch, wenn Sie möchten, dass Such-Bots auf Ihrer Website navigieren können, obwohl die tatsächlichen Benutzer z. eine reaktionsfähigere Oberfläche (z. B. Herunterladen des aktualisierten Inhalts über AJAX). Stellen Sie sicher, dass gängige Methoden zum Öffnen des Links in einem neuen Fenster/Tab weiterhin funktionieren (weder Strg + Klicken noch Rechts- und Mittelklick müssen die Aktion onclick ausführen).

Schaltflächen sind die Elemente, die für die Interaktion mit der aktuellen Seite zuständig sind. Dies bedeutet, dass clientseitige Skripts ausgeführt oder ein Formular an den Server gesendet werden.

EDIT:

Mit der Bearbeitung auf Ihre Frage, es ist offensichtlich, dass man einfach einen Anker mit einer normalen href verwenden sollte. Es gibt keinen Grund, entweder onclick oder button zu verwenden, und Sie sind machen nur einen einfachen Hyperlink, das ist, was Anker sind.

Answer 2

So the answer here is: semantics.

An anchor should be used for a hyperlink. Navigational items used to move from one page to another. It's a reference to data that the user can get to by clicking the link.

A button is a button. It's used for functionality.

In your example they're both calling an onclick event, so they're only going to have one difference. In the case of the anchor you have to override the default behavior using event.preventDefault().

Also, the top 3 results via Google:

http://davidwalsh.name/html5-buttons

HTML/CSS - Buttons - When to use what

http://www.reddit.com/r/Frontend/comments/1y9zdh/anchor_vs_button_a_question_on_html_semantics/