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

使用简单的 jquery 通过定义必须在单击哪个按钮时显示哪个 div 来实现。

$('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();
});