我用于隐藏/显示 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";

        }

    }