3 divs隐藏和基本打开按钮单击jquery

mefy6pfw  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(265)

我有三个div。每一个都有不同的内容,当用户单击按钮时,将显示三个div和三个按钮。
我想在加载页面时将第一个设置为默认设置,以便显示其内容。
这是我试过的-它没有按我想要的那样工作,请更正我的代码

$(function() {
  $('#indexed').click();
  $('.target').show();
});
$('.single').click(function() {
  $('.target').hide();
  $('#div' + $(this).attr('target')).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container days">
  <div class="menu">
    <a id="indexed" class="single" target="1">today</a>
    <a class="single" target="2">Yesterday</a>
    <a class="single" target="3">Two Days Ago</a>
  </div>

  <section class="target_box">
    <div id="div1" class="target">content 1</div>
    <div id="div2" class="target">content 2</div>
    <div id="div3" class="target">content 3</div>
  </section>
</div>
nhaq1z21

nhaq1z211#

如果您删除了 $('.target').show(); 无论单击什么,都将显示所有
注意:我在初始视图中添加了一个显示:无

$(function() {
  $('#indexed').click();
});
$('.single').click(function() {
  $('.target').hide();
  $('#div' + $(this).attr('target')).show();
});
.target { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container days">
  <div class="menu">
    <a id="indexed" class="single" target="1">today</a>
    <a class="single" target="2">Yesterday</a>
    <a class="single" target="3">Two Days Ago</a>
  </div>

  <section class="target_box">
    <div id="div1" class="target">content 1</div>
    <div id="div2" class="target">content 2</div>
    <div id="div3" class="target">content 3</div>
  </section>
</div>
ldxq2e6h

ldxq2e6h2#

<section class="target_box">
    <div id="div1" class="target">content 1</div>
    <div id="div2" class="target" style="display:none;">content 2</div>
    <div id="div3" class="target" style="display:none;">content 3</div>
  </section>

看起来你必须先隐藏一些内容。因此,只有内容1可见。

相关问题