在按钮点击时显示/隐藏div [英] Show/hide div on button click

问题描述

我试图根据按下哪个按钮显示和隐藏内容。

I am trying to show and hide content depending on which button is pressed. The next button should show content 2 and hide content 1, and previous button should do the opposite.

<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>

推荐答案

尝试 toggleClass ，并且不要忘记使用 document.ready（）：

Try toggleClass and don't forgot to use document.ready():

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

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

这篇关于在按钮点击时显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！