hide and show features using jquery - arrays

Question

I need some help. I'm designing a website. In home page, there are several links. With the help of jquery, I want to hide and show content (on the same page) depending on the links which the user clicks.
I have achieved it, but I feel; its not the right approach. Is there anyway to achieve this with minimal code? may be using arrays or loops? Please have a look at the example that I have created.
Thanks in advance.
$('.para2').hide();
$('.para3').hide();
<!--One-->
$('.one').click(function(){
$('.para1').show();
$('.para2').hide();
$('.para3').hide();
})
<!--Two-->
$('.two').click(function(){
$('.para2').show();
$('.para1').hide();
$('.para3').hide();
})
<!--three-->
$('.three').click(function(){
$('.para3').show();
$('.para1').hide();
$('.para2').hide();
})
<ul>
<li><a href="#" class="one" >Para -1</a></li>
<li><a href="#" class="two" >Para -2</a></li>
<li><a href="#" class="three" >Para -3</a></li>
</ul>
<div class="para1" style="width:500px; padding:10px; border:1px solid red; background:#009966">
<h1>Para -1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para2" style="width:500px; padding:10px; border:1px solid red; background:#333333">
<h1>Para -2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para3" style="width:500px; padding:10px; border:1px solid red;">
<h1>Para -3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>

Answer 1

You may change like below:
Html:
<ul>
<li><a href="#" class="paraLink" data-para="one" >Para -1</a></li>
<li><a href="#" class="paraLink" data-para="two" >Para -2</a></li>
<li><a href="#" class="paraLink" data-para="three" >Para -3</a></li>
</ul>
<div class="para one" ...
<div class="para two" ...
<div class="para three" ...
JS:
$(function() {
$('.paraLink').click(function(e) {
e.preventDefault();
$('.para').hide();
$('.'+$(this).data('para')).show();
});
});
THE WORKING DEMO.