Home > Article > Web Front-end > Toggle Buttons: Semantic HTML or Custom jQuery Styling - Which is Best?
Creating Toggle Buttons: Semantic vs Stylish Options
Toggle buttons allow users to alternate between two states. While HTML natively includes checkbox inputs, they may not always meet the desired visual requirements.
Semantic Approach: Checkbox Styling
The recommended semantic approach involves using a checkbox and styling it differently based on its checked state. However, styling a checkbox effectively can be challenging.
Alternative: jQuery and CSS
For a more customizable solution, consider using jQuery and CSS:
Assign Toggle Event:
Toggle CSS Classes:
CSS Styling:
Example:
<code class="js">$(document).ready(function() { $('a#button').click(function() { $(this).toggleClass("down"); }); });</code>
<code class="css">a { background: #ccc; cursor: pointer; border-top: solid 2px #eaeaea; border-left: solid 2px #eaeaea; border-bottom: solid 2px #777; border-right: solid 2px #777; padding: 5px 5px; } a.down { background: #bbb; border-top: solid 2px #777; border-left: solid 2px #777; border-bottom: solid 2px #eaeaea; border-right: solid 2px #eaeaea; }</code>
<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="button" title="button">Press Me</a></code>
The above is the detailed content of Toggle Buttons: Semantic HTML or Custom jQuery Styling - Which is Best?. For more information, please follow other related articles on the PHP Chinese website!