In: Computer Science
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){//whten the document gets ready
$('#red1').hide()//hides the chunk of text whose id is red1, .hide
is a jquery method
$('#blue1').hide()//hides the chunk of text whose id is blue1,
.hide is a jquery method
$('#green1').hide()//hides the chunk of text whose id is green1,
.hide is a jquery method
$(red).on('click',function(){//when the link 1 is clicked i.e id
red the chunk of text for the red id appears
$('#red1').show()//shows the text , .show is a jquery method
});
$(blue).on('click',function(){//when the link 1 is clicked i.e id
blue the chunk of text for the blue id appears
$('#blue1').show()//shows the text , .show is a jquery method
});
$(green).on('click',function(){//when the link 1 is clicked i.e id
green the chunk of text for the green id appears
$('#green1').show()//shows the text , .show is a jquery
method
});
});
</script>
</head>
<body>
<a id="red"
href="#">link1</a><!--links for the various
ids-->
<br>
<a id="blue"
href="#">link2</a>
<br>
<a id="green"
href="#">link3</a>
<br>
<div id="red1">chunk of text for red
.</div><!--chunks of text for various ids-->
<div id="blue1">chunk of text for blue
.</div>
<div id="green1">chunk of text for green
.</div>
</body>
</html>