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

我试图使第一个目标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>

最佳答案

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

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