pushState Выполнение, когда не допускается

Question

Я использую API истории HTML для управления стеком истории браузера для управления навигацией с использованием JavaScript на моем сайте. Функция, которую я настроил для изменения страниц, работает нормально, но странно, когда я добавлял pushState к каждой отдельной странице, pushState срабатывает автоматически, так что последнее изменение страницы в функции всегда является окончательным. Это означает, что текущее состояние всегда является последним заявлением об изменении страницы.

JavaScript:

// Change Page Function 

function ChangeContent (page) { 

var pages={"homepage":{title: "homepage"},"servicespage":{title: "servicespage"},"estimatespage":{title: "estimatespage"}}; 

HideNav(); 

//Show home page 
for(var homepage in pages) { 

    if(page!==homepage) { 

     document.getElementById(homepage).style.display='none'; 
    } 

    else { 

     document.getElementById(homepage).style.display='block'; 
     history.pushState("homepage", "Home", "home"); 
     window.scrollTo(0,0); 
    } 
} 

//Show services page 
for(var servicespage in pages) { 

    if(page!==servicespage) { 

     document.getElementById(servicespage).style.display='none'; 
    } 

    else { 

     document.getElementById(servicespage).style.display='block'; 
     history.pushState("servicespage", "Our Services", "services"); 
     window.scrollTo(0,0); 
    } 
} 

//Show estimates page 
for(var estimatespage in pages) { 

    if(page!==estimatespage) { 

     document.getElementById(estimatespage).style.display='none'; 
    } 

    else { 

     document.getElementById(estimatespage).style.display='block'; 
     history.pushState("estimatespage", "Get An Estimate", "estimates"); 
     window.scrollTo(0,0); 
    } 
} 
} 

При выполнении этого кода, а не каждой отдельной страницы толкающего это состояние, когда эта страница будет нажата, состояние получения оттолкнулся всегда состояние страницы оценки. Я попытался использовать операторы else if вместо этого, и я попытался вставить каждый оператор for в собственные исполняемые функции, надеясь, что он может решить проблему с областью какой-либо области, но мне не повезло.

Это моя onPopstate функция:

// History State Change Display 
window.onpopstate = function (event) { 

var state = event.state; 

console.log(state); 

// Change History State Display To Home Page 
if (state === "homepage") { 

    document.getElementById("homepage").style.display = 'block'; 
} else { 

    document.getElementById("homepage").style.display = 'none'; 
} 

// Change History State Display To Services Page 
if (state === "servicespage") { 

    document.getElementById("servicespage").style.display = 'block'; 
} else { 

    document.getElementById("servicespage").style.display = 'none'; 
} 

// Change History State Display To Estimates Page 
if (state === "estimatespage") { 

    document.getElementById("estimatespage").style.display = 'block'; 
} else { 

    document.getElementById("estimatespage").style.display = 'none'; 
} 
}; 

По какой-то причине каждая новая страница я нажимаю на есть расширения URL /estimatespage, а затем, когда я нажимаю кнопку назад, он просто перебирает страницы в обратном порядке в которые они были записаны в функции изменения страницы, и правильно обновляет URL-адрес.

Я не совсем уверен, в чем проблема, но я думаю, что я автоматически нажимаю состояние всех страниц, что является странным, поскольку остальная часть кода выполняется только при выборе правильной страницы ,

Любая помощь будет оценена по достоинству, так как я думаю, что это, вероятно, более очевидно, чем я ее делаю.

HTML

<div id="nav"> 
    <div class="headerlist" onclick="ChangeContent('homepage');">Home</div> 
    <div class="headerlist" onclick="ChangeContent('servicespage');">Services</div> 
    <div class="headerlist" onclick="ChangeContent('estimatespage');">Estimates</div> 
</div> 

<div id=homepage></div> 
<div id=servicespage></div> 
<div id=estimatespage></div> 

Answer 1

У вас есть три for петли в ChangeContent(). Все три цикла проверяются для одного и того же условия - просто с переименованной переменной.

Сохраняя стиль неопределенно же, вы можете попробовать это вместо этого, обратите внимание, что этот один цикл, чтобы заменить все три из этих петель в ChangeContent():

 for (var p in pages) { 
      if (page !== p) { 
       document.getElementById(p).style.display = 'none'; 
      } 
      else { 
       document.getElementById(p).style.display = 'block'; 
       if (p === "homepage") 
        history.pushState("homepage", "Home", "home"); 
       else if (p === "servicespage") 
        history.pushState("servicespage", "Our Services", "services"); 
       else if (p === "estimatespage") 
        history.pushState("estimatespage", "Get An Estimate", "estimates");      
       window.scrollTo(0, 0); 
      } 
     }