Question

我需要一些帮助。我正在设计一个网站。在主页中，有几个链接。在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>

Answer 1

您可以更改如下：

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.

使用jquery隐藏和显示功能

1 个答案: