Example: Overriding a hyperlink
<a href="https://www.google.com/">Google</a>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "This code overrides the hyperlink." );
event.preventDefault();
});
});
</script>
Run it:
Example: Show/Hide Content
The following example demonstrates how to show and hide content using JQuery. The example involves a quiz review. Each button can be clicked the show content (the answer) and clicked agian to hide the content just displayed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("p").hide();
$("#btn1").click(function(){
$("#p1").toggle();
});
$("#btn2").click(function(){
$("#p2").toggle();
});
$("#btn3").click(function(){
$("#p3").toggle();
});
});
</script>
</head>
<body>
<h2>HTML Quiz Review</h2>
<h3>Be familiar with the following HTML concepts and skills. Click the button to reveal
the answer. </h3>
1. <button id="btn1">HTML stands for what?</button>
<p id="p1">HyperText Markup Language</p>
<br><br>
2. <button id="btn2">Is HTML a client-side or server-side language?</button>
<p id="p2">Client-side</p>
<br><br>
3. <button id="btn3">HTML stands are maintained by what organization?</button>
<p id="p3">World Wide Web Consortium (W3C)</p>
</body>
Run it: