Arrays 使用jquery隐藏和显示功能

我需要一些帮助。我正在设计一个网站。在主页中，有几个链接。在jquery的帮助下，我希望根据用户单击的链接隐藏和显示内容（在同一页面上）。 我已经做到了，但我觉得；这不是正确的方法。是否有任何方法可以用最少的代码实现这一点？可能正在使用数组或循环？请看一下我创建的示例。 提前谢谢

$('.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>

$（'.para2'）.hide（）；
$（'.para3'）.hide（）；
$（'.one'）。单击（函数（）{
$（'.para1'）.show（）；
$（'.para2'）.hide（）；
$（'.para3'）.hide（）；
})
$（'.two'）。单击（函数（）{
$（'.para2'）.show（）；
$（'.para1'）.hide（）；
$（'.para3'）.hide（）；
})
$（'.three'）。单击（函数（）{
$（'.para3'）.show（）；
$（'.para1'）.hide（）；
$（'.para2'）.hide（）；
})





第1款
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·奥克托·普鲁斯（Morbi auctor purus）在威尼斯国家按摩院（massa venenatis nec）进行面部按摩。潜力悬钩子。在设施方面，nisl是一家威尼斯拍卖行，在马萨有一家康格托托拍卖行，在马萨有一家大型拍卖行。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。
第2段
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·奥克托·普鲁斯（Morbi auctor purus）在威尼斯国家按摩院（massa venenatis nec）进行面部按摩。潜力悬钩子。在设施方面，nisl是一家威尼斯拍卖行，在马萨有一家康格托托拍卖行，在马萨有一家大型拍卖行。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。
第3段
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·奥克托·普鲁斯（Morbi auctor purus）在威尼斯国家按摩院（massa venenatis nec）进行面部按摩。潜力悬钩子。在设施方面，nisl是一家威尼斯拍卖行，在马萨有一家康格托托拍卖行，在马萨有一家大型拍卖行。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。

您可以进行如下更改：

Html:

---

谢谢您的回答。这很好，但是，我忘了提到我希望第一个段落是dsiplayed（因为我不希望页面上有空的链接），当点击它时，它应该被替换。我试过了，但没用。$（'para one'）.show（）$（'第二段'）.hide（）；$（'第三段'）.hide（）；

<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" ...

$(function() {
  $('.paraLink').click(function(e) {
      e.preventDefault();
      $('.para').hide();
      $('.'+$(this).data('para')).show();
  });
});