javascript函数显示/隐藏多个div，第一个div可见

Question

我试图让第一个目标 div 在页面加载时始终可见，而其他目标在用户选择该选项时变得可见。目前它们都在页面加载时隐藏，只有在单击按钮后才会显示。

JS

 $('.targetDiv').hide();
 $('.show').click(function () {
 $('.targetDiv').hide();
 $('#div' + $(this).attr('target')).show();
 });

HTML

<div class="buttons">
 <a  class="show" target="1">Option 1</a>
 <a  class="show" target="2">Option 2</a>
 <a  class="show" target="3">Option 3</a>
 <a  class="show" target="4">Option 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

Answer 1

您可以使用 $('.targetDiv:not(#div1)').hide() DEMO

$('.targetDiv:not(#div1)').hide();
$('.show').click(function() {
  $('.targetDiv').hide();
  $('#div' + $(this).attr('target')).show();
});