JQuery: Content and Hyperlinks


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:

jq1.html


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:

jq3.html