javascript - 使用按钮单击 JavaScript 显示/隐藏带有子 div 的 div

Question

如何使用子 div 来显示/隐藏 div，例如:

<div class="form-group" style="display:none;">
    <div id="tabicon" style="display:none;">
        <span>ICON</span>
    </div>
    <div id="tabimages" style="display:none;">
        <span>IMAGES</span>
    </div>
</div>

<div id="button_tab">
    <input type="button" name="btnicon" value="icon">
    <input type="button" name="btnimages" value="images">
</div>

这样，当我单击 btnicon 时，选项卡图标就会打开/显示，并且 当我单击 btnimages 时，选项卡图像打开/显示，选项卡图标隐藏？

Answer 1

通过定义哪个 div 必须在单击哪个按钮时显示，使用简单的 jquery 来完成此操作。

$('btnicon').on('click', function(){
    $('#tabicon,.form-group').show();
});

$('btnicon').on('click', function(){
    $('#tabimages,.form-group').show();
});

如果您想在按钮上显示此 div 并隐藏另一个 div，请使用此

$('btnicon').on('click', function(){
    $('#tabicon,.form-group').show();
    $('#tabimages').hide();
});

$('btnicon').on('click', function(){
    $('#tabimages,.form-group').show();
    $('#tabicon').hide();
});