JS

Question

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

Answer 1

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

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

Answer 2

使用:gt(0)： -

：gt（）选择匹配集中索引大于索引的所有元素。

$('.targetDiv:gt(0)').hide();

注意：

<强> target

此属性指定显示链接资源的位置。（_自，   _blank，_ parent，_top）

仅当href属性存在时才使用此属性。

因此我建议使用数据： -

<a class="show" data-target="1">Option 1</a>

并使用以下方法获取值： -

$(this).data('target')

Answer 3

隐藏其他div后，在第一个div上调用... yourStage.setMinHeight(480); yourStage.setMinWidth(640); ...：

.show()

Answer 4

试试此代码

foo <- function(x) {
  print(paste0('so ', head(x, 1), 'y!!!'))
  for (l in tail(x, -1)) print(paste0(l, 'y'))
}

foo(loopit)

Answer 5

另一种方法是你可以在HTML JSFiddle

中简单地用css隐藏div

<强> 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" style="display:none;">Lorum Ipsum 2</div>
   <div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum 3</div>
   <div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum 4</div>

<强>的Javascript

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

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

JS

HTML

5 个答案: