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

Bushra Zaher • 3 年前 • 1180 次点击

我有三个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>

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/130719

1180 次点击

文章 [ 2 ] | 最新文章 3 年前

• 1 楼

Yevhenii Shlapak 3 年前

  <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可见。

• 2 楼

mplungjan 3 年前

如果你移除了 $('.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>

登录后回复