Добавить/удалить класс CSS на основе #hash

Question

У меня есть две формы на моем сайте. один .login-form и один .registration-form. по умолчанию форма входа в систему имеет свойство display: block, а регистрационная форма имеет display: none. У меня есть кнопка для переключения между двумя формами. что уже работает красиво.

Теперь я хочу переключить эти свойства на основе хеша URL. поэтому, если вы посетили /user.html#registration, я хочу сначала просмотреть регистрационную форму, а не форму входа в систему.

как я могу это достичь? Я очень ценю вашу помощь!

jaro.

Answer 1

короткий скрипт для чтения хэш должен сделать:

<script> 
// Add this block to where your "after page load" code starts. 
// If you use a framework, you should adjust the solution to your framework. 
if (location.hash && location.hash === "#registration") { 
    // or whichever way your app switches between the two 
    document.body.classList.add("show-registration"); 
} // else it'll show login, as intended. 
</script> 

Если ваш CSS не настроен для этого уже:

<style> 
body.show-registration .login-form { 
    display: none; 
} 
body.show-registration .registration-form { 
    display: block; 
} 
</style> 

Answer 2

Я думаю, что это в значительной степени то, что вы ищете для:

window.addEventListener("hashchange",() => { 
    if (window.location.hash === "registration") { 
    document.querySelector(".registration-form").style.display = "block"; 
    } 
});