javascript - 单击按钮显示/隐藏 div

Question

我正在尝试根据按下的按钮显示和隐藏内容。下一个按钮应该显示内容 2 并隐藏内容 1，而上一个按钮应该做相反的事情。

<script type="text/javascript">
    $('a.button-next').click(function() {
        $("#tab-content2").addClass("show");
    });
</script>

CSS:

#tab-content2 {
    display: none;
}
#tab-content2.show {
    display: none;
}

HTML:

<div id="tab-content1">             
    <?php the_content(); ?>
</div>

<div id="tab-content2">     
    <?php the_field("experience");?>
</div>

<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>

Answer 1

尝试 toggleClass别忘了使用 document.ready() :

$(document).ready(function() {
    $('a.button-next').click(function() {
        $("#tab-content2").toggleClass("show");
    });
});

#tab-content2.show {display:block;}