Question

我尝试使用我在本网站上找到的一些javascript来显示和隐藏两个不同的div。基本上，当有人点击到达或点击＆＃34;按钮＆＃34;时，我希望AAA div显示在下面。当有人点击＆＃34; b按钮＆＃34;时，我想隐藏AAA div并在下面显示BBB div。

我考虑过使用Bootstrap崩溃，但不想要动画。

我做错了什么？

http://matthewtbrown.com/test/index.html

// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});

// set content on load
$('.button.active').length && setContent($('.button.active'));

function setContent($el) {
 $('.button').removeClass('active');
$('.container').hide();

$el.addClass('active');
$($el.data('rel')).show();
}

<div class="flr-wrap">
<ul>
    <li><a class="timebutton active" data-rel="#content-a" href="#">a button</a></li>
    <li><a class="timebutton" data-rel="#content-b" href="#">b button</a></li>
</ul>

<div class="flr-inner">
    <div class="timecontainer" id="content-a">
        AAA
    </div>
    <div class="timecontainer" id="content-b">
        BBB
    </div>
</div>

Answer 1

假设你加载了jQuery，你可以使用点击处理程序和show（）hide（）函数。

$(".a-button").click(() => {
  $("#foo").hide()
  $("#bar").show()
});

$(".b-button").click(() => {
  $("#bar").hide()
  $("#foo").show()
});

如何使用javascript显示和隐藏两个不同的div？

1 个答案: