我用于隐藏/显示 HTML 的 JavaScript 正在删除它更改的各个元素的 CSS

Question

当我单击按钮时，我有这段代码隐藏或显示 HTML 元素：

function showMonth() {

    var x = document.getElementById("calendarDiv");

    if (x.style.display === "none") {

        x.style.display = "block";

        document.getElementById("timelineDiv").style.display = "none";

    } 

}

function showWeek() {

    var x = document.getElementById("timelineDiv");

    if (x.style.display === "none") {

        x.style.display = "inline-block";

        document.getElementById("calendarDiv").style.display = "none";

    } 

}

但是，在按下 showMonth 按钮后按下我的 showWeek 按钮时，我一周的 html 与我按下任何按钮之前的情况大不相同。我认为它可能正在删除/忽略它之前看到的 CSS。非常感谢任何想法/意见/帮助！

Answer 1

如果你可以在你的代码中使用 jQuery，也许是这样的。CSS:.Hide {    Display: none !important;}Javascript:function showMonth() {    var x = document.getElementById("calendarDiv");    if ($('#calendarDiv').hasClass("Hide")) {        $('#calendarDiv').removeClass("Hide");        $('#timelineDiv').addClass("Hide");    } }function showWeek() {    var x = document.getElementById("timelineDiv");    if ($('#timelineDiv').hasClass("Hide")) {        $('#timelineDiv').removeClass("Hide");        $('#calendarDiv').addClass("Hide");    }}

Answer 2

像这样显示隐藏元素。你确定 x.style.display = "inline-block" 不是 x.style.display = "block"function showMonth() {            var x = document.getElementById("calendarDiv");            if (x.style.display === "none") {                x.style.display = "block";                }         else{         x.style.display = "none";        }    }    function showWeek() {        var x = document.getElementById("timelineDiv");        if (x.style.display === "none") {            x.style.display = "inline-block";        }       else{         x.style.display = "none";        }    }