使用div通过“ display：none”隐藏显示div？

Question

下面的HTML和JavaScript可以按预期工作，但是我想确保自己使用正确。

我有两个div，但根据mode的值，只需要显示一个即可。

HTML：

<body>
        <div id="a-div" style="display: none;">
            <button id="add" class="btnstyle">Add </button>
        </div>
        <div id="d-div" style="display: none;">
            <button id="delete" class="btnstyle">Delete</button>
        </div>
</body>

JS：

//$("#a-div").hide();
//$("#d-div").hide();

var mode = 'add';
//var mode = 'delete';
if (mode === 'add') {
    $("#a-div").show();
} else {
    $("#d-div").show();
}

这给了我预期的结果。 有没有更好的方法来反转style="display: none"属性？

Answer 1

您当前的代码应该可以正常工作，但是有很多方法可以解决此问题。 我建议使用jQuerys toggle() ：

$("#a-div").toggle(mode === "add");
$("#a-div").toggle(mode === "delete");

另外，您可以给他们一个id的add-div和delete-div ，使其中一个可见，如下所示：

$("#" + mode + "-div").show();

Answer 2

您可以使用：

$("#a-div").toggle();

另外;
.show() / .show() .hide()
.fadeIn() / fadeOut()

Answer 3

您需要修改内联样式属性的显示属性。

像这样...

var mode = 'add';

if (mode === 'add') {
    $("#a-div")[0].style.display = 'block';
} else {
    $("#d-div")[0].style.display = 'block';
}

或者，您可以使用诸如inherit之类的东西来代替block 。

Answer 4

有几种方法可以做到这一点（就像您可以在其他答案中看到的那样），但是我认为show()函数足以满足您的情况。

您还可以使用JQuery的css()方法，如下所示：

$("#a-div").css('display','block');

希望这可以帮助。

Answer 5

另一个选择是将样式移动到CSS：

HTML：

    <div id="a-div" class="notdisplayed">
        <button id="add" class="btnstyle">Add </button>
    </div>
    <div id="d-div" class="notdisplayed">
        <button id="delete" class="btnstyle">Delete</button>
    </div>

CSS：

.notDisplayed {display:none;}

脚本：

$("#a-div").addClass("notDisplayed");
$("#d-div").removeClass("notDisplayed");

此方法比show / hide更通用，因为它可以扩展到任何样式规则。

使用div通过“ display：none”隐藏显示div？

问题描述

5 个解决方案

解决方案1
1 2015-09-16 19:50:05

解决方案2
0 2015-09-16 19:41:28

解决方案3
0 2015-09-16 19:41:56

解决方案4
0 2015-09-16 19:42:24

解决方案5
0 2015-09-16 20:00:29

使用div通过“ display：none”隐藏显示div？

问题描述

5 个解决方案

解决方案1 1 2015-09-16 19:50:05

解决方案2 0 2015-09-16 19:41:28

解决方案3 0 2015-09-16 19:41:56

解决方案4 0 2015-09-16 19:42:24

解决方案5 0 2015-09-16 20:00:29

解决方案1
1 2015-09-16 19:50:05

解决方案2
0 2015-09-16 19:41:28

解决方案3
0 2015-09-16 19:41:56

解决方案4
0 2015-09-16 19:42:24

解决方案5
0 2015-09-16 20:00:29