CSS/HTML5 using :target or :active to display different text when link is clicked

Question 1

The idea of switching the text of the body without reloading the page is what is commonly known as “single page application”, a rather trendy thing with many benefits and some disadvantages or challenges. It is normally implemented using JavaScript, often using a library or framework, since that’s how we handle programming on web pages.

However, it is possible to achieve the very basic functionality of a single-page application using HTML and CSS only. This functionality means that the page has the content of an entire site and only a selected part of it is visible. You would use :target, which refers to the element that was the target of the most recent link that was followed. (The :active pseudo-class is something very different: it refers to a link or equivalent when it has been activated, typically by clicking on it, and before it has actually been followed – normally, a short time.)

Minimal example:

<!doctype html>
<meta charset=utf-8>
<style>
.section { display: none }
.section:target { display: block }
</style>
<div class="nav-bar">
<ul class="nav">
    <li><a href=#About>About</a></li>
    <li><a href=#Contact>Contact</a></li>
    <li><a href=#Other>Other</a></li>
</ul>
</div>
<div id=About class=section>
About us
</div>
<div id=Contact class=section>
Contact us
</div>
<div id=Other class=section>
Other stuff
</div>

This does not work e.g. on IE 8 and older (which do not support :target), which is one of the reasons why this is a rather theoretical approach.

Question 2

You are going to need to use Javascript to change things dynamically without page refresh ... This is crude, but will show you how to do what you are expecting ...

NOTE: You must include the <script src="http://code.jquery.com/jquery-1.9.1.js"></script> since I have used a bit of jQuery (A JavaScript library)

<html>
<head>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="nav-bar">
<ul class="nav">
    <li id="other1" onClick="changeText('other1');"><a>About</a></li>
    <li id="other2" onClick="changeText('other2');"><a>Contact</a></li>
    <li id="other3" onClick="changeText('other3');"><a>Other</a></li>
</ul>
</div>
<div id="page_content">
PAGE CONTENT!!
</div>

<script>
 function changeText(text){
      if (text === 'other1'){
      $('#page_content').html('About Us!!');
      }
      if (text === 'other2'){
      $('#page_content').html('Contact Us!!');
      }
      if (text === 'other3'){
      $('#page_content').html('Other!!');
      }

 }
</script>
</body>
</html>