Как перейти на страницу с уникальной ссылкой, которая делает определенную вкладку активной? ⇐ Javascript

[Anonymous]

У меня есть несколько вкладок, определенных в HTML, и я использую JavaScript для переключения между контентом Active Tab, когда нажата соответствующая кнопка вкладки. Щелчок работает нормально, и вкладки выглядят следующим образом:

Теперь я хочу использовать уникальный И попросите его загрузить с правильной вкладкой уже активной. Например, если я перейду к ссылке my-site.com/projects/#engineering , то она должна открыть инженерную вкладку на странице index.html. Большинство существующих ответов, которые я видел, используют jQuery. < /P>

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
const buttons = document.querySelectorAll(".tab-button"); // Retrieve all tab buttons
const contents = document.querySelectorAll(".tab-content"); // Retrieve all tab contents

// A function which deactivates all buttons and contents
function deactivateAll() {
buttons.forEach(btn => btn.classList.remove("active"));
contents.forEach(content => content.classList.remove("active"));
}

// Add an event listener for each button.
// If a button is clicked, then deactivate all buttons, and add the clicked button to the "active" state list.
buttons.forEach(button => {
button.addEventListener("click", () => {
deactivateAll();
button.classList.add("active");
document.getElementById(button.dataset.tab).classList.add("active");
});
});

// Activate first tab by default
if (buttons.length) {
buttons[0].click();
}
});< /code>
.tab-buttons {
display: inline-flex;
flex-wrap: wrap;
}

.tab-button {
background: #eaeaea;
border: none;
}

.tab-button.active {
background: #333;
color: white;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}< /code>


 Electronics 
 Engineering 




[list]
[*] Electronics Post 1
[*] Electronics Post 2
[/list]

[list]
[*] Engineering Post 1
[*] Engineering Post 2
[*] Engineering Post 3
[/list]

Подробнее здесь: https://stackoverflow.com/questions/797 ... tab-active