Для реализации перевода страницы через кнопки на HTML, вы можете использовать язык JavaScript. Ниже приведен пошаговый пример, который покажет вам, как это можно сделать.
1. В HTML-разметке создайте элемент для отображения кнопок перевода и элемент, который будет содержать текст, подлежащий переводу. Например:
<button onclick="translate('en')">English</button>
<button onclick="translate('ru')">Russian</button>
<div id="content">
<h1>Hello, World!</h1>
<p>This is a sample text.</p>
</div>
2. Добавьте следующий скрипт на языке JavaScript в раздел <head> вашей HTML-страницы:
<script>
function translate(lang) {
var elements = document.querySelectorAll('[data-translate]');
for (var i = 0; i < elements.length; i++) {
var key = elements[i].getAttribute('data-translate');
elements[i].innerText = translations[lang][key];
}
}
var translations = {
'en': {
'hello': 'Hello',
'sample_text': 'This is a sample text.'
},
'ru': {
'hello': 'Привет',
'sample_text': 'Это пример текста.'
}
};
</script>
3. Внутри объекта translations определены различные языковые версии текста, которые вы хотите перевести на страницу.
4. В функции translate(lang) мы используем document.querySelectorAll('[data-translate]'), чтобы найти все элементы, содержащие атрибут data-translate. Затем мы проходим по этим элементам и заменяем их содержимое на соответствующий перевод из объекта translations, исходя из выбранного языка.
Таким образом, при нажатии на кнопку "English" соответствующие элементы на странице будут отображаться на английском языке, а при нажатии на кнопку "Russian" они будут отображаться на русском языке.
Это простой пример реализации функциональности перевода страницы через кнопки на HTML с использованием JavaScript. Однако, при разработке реального проекта, возможно, потребуется использование более сложных методов и инструментов для обеспечения локализации и управления переводами.