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