Мой JavaScript для скрытия / отображения HTML удаляет 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";
    } 
}

Однако, когда я нажимаю кнопку showWeek после нажатия кнопки showMonth, 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";
        }
    }