Question

如何使用sub 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();
});

Answer 2

$('input[name=btnicon]').click(function(){//icon click
$('#tabicon').show()//show icon div
$('#tabimages').hide()//hide image div

}).click()//manually call click to show icon div on load
$('input[name=btnimages]').click(function(){//image click
$('#tabicon').hide()//hide icon div
$('#tabimages').show()//show image div

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <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>

Answer 3

试试这个：您必须从父div中删除div，因为这会隐藏其所有子元素。创建按钮处理程序并使用display:none和.show()方法，如下所示 -

HTML：

.hide()

jQuery的：

<div class="form-group">
    <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>

Answer 4

而不是设置＆＃34;隐藏＆＃34;属性直接隐藏/显示您可以通过向父容器添加和删除类来设置属性。＆＃34;形式的基团＆＃34;

.parent-class, #tabicon, #tabimage {
  display: none;
}

.parent-class.icon-class, .parent-class.image-class {
  display: block;
}

.parent-class.icon-class #tabicon{
  display: block;
}

.parent-class.image-class #tabimage {
  display: block;
}

这样，当您将类添加到父容器时，您将显示隐藏父容器，基于它将其中一个子项处于活动状态。根据父容器中哪些类处于活动状态，您已设置为活动状态的当前子项也将可见。

如果没有子项处于活动状态，则将隐藏父容器。

使用按钮单击JavaScript显示/隐藏div与子div

4 个答案: