help needed with menu using jquery
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
.mn_offLeft {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".a1 a").click(function () {
$("#c1").show();
$("#c2").hide();
$("#c3").hide();
});
$(".a2 a").click(function () {
$("#c2").show();
$("#c1").hide();
$("#c3").hide();
});
$(".a3 a").click(function () {
$("#c3").show();
$("#c1").hide();
$("#c2").hide();
});
});
</script>
</head>
<body>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<ul class="shadeTabs" id="mainTab">
<li><span class="a1"><a href="#">Page 1</a></span></li>
<li><span class="a2"><a href="#">Page 2</a></span></li>
<li><span class="a3"><a href="#">Page 3</a></span></li>
</ul>
<div id="c1">Hello1</div>
<div id="c2">Hello2</div>
<div id="c3">Hello3</div>
</body>
</html>
this is my code....as u can see the jquery code is repeating itself hw to avoid this, i am new to jquery any help is deeply appreciated