Highlight anchor element - html

Question

I have the following three items displayed side by side:
<div class="page-header">
<h1 style="line-height:0">Title</h1>
<ul style="float: right; list-style-type: none;">
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
I want to highlight the item once the user clicked on it (eg. T1). Something similar to how stackoverflow has the blocks like Questions, Tags, Users etc.

Answer 1

Check this out:
// Start up jQuery
$(document).ready(function() {
$('a.nav').click(function(e) {
e.preventDefault();
$('a.nav').removeClass('current_page');
// Do an ajax call instead
$('#response').html($(this).attr("href"));
$(this).addClass('current_page');
});
});
* {
font-family: Verdana;
font-size: 13px;
}
div#wrapper {
margin: 20px;
}
.current_page {
color: red;
font-weight: bold;
text-decoration: none;
}
#response {
width: 300px;
height: 200px;
padding: 5px;
border: 1px dotted #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<a class="nav" href="http://www.google.com">Google</a> |
<a class="nav" href="http://www.facebook.com">Facebook</a> |
<a class="nav" href="http://www.stackoverflow.com">Stackoverflow</a> |
<a class="nav" href="http://www.myspace.com">Myspace</a> |
<a class="nav" href="http://www.craigslist.com">Craigslist</a>
<p> </p>
<p>Response:</p>
<div id="response"></div>
</div>
So basically, it pushes a class .current_page to the activated anchor tag which imprints that MEMORY ID in the DOM. You would then implement an ajax call to inject content within the page.