Чтобы помочь вам с вашей проблемой переключения между кнопками Tabs1 и Tabs2 в HTML, я предлагаю использовать JavaScript для управления отображением контента и обновления информации. Вот один из способов реализации этой функциональности:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Переключение между Tabs</title>
<style>
.tab-content {
display: none;
}
.active {
display: block;
}
.tabs {
cursor: pointer;
padding: 10px;
border: 1px solid #ccc;
display: inline-block;
}
</style>
</head>
<body>
<div class="tabs" onclick="showTab('tab1')">Tabs1</div>
<div class="tabs" onclick="showTab('tab2')">Tabs2</div>
<div id="tab1" class="tab-content active">
<h2>Содержимое Tabs1</h2>
<textarea id="tab1Description" placeholder="Введите описание для Tabs1"></textarea>
<button onclick="updateTab1Description()">Сохранить описание</button>
<p id="tab1Text"></p>
</div>
<div id="tab2" class="tab-content">
<h2>Содержимое Tabs2</h2>
<textarea id="tab2Description" placeholder="Введите описание для Tabs2"></textarea>
<button onclick="updateTab2Description()">Сохранить описание</button>
<p id="tab2Text"></p>
</div>
<script>
function showTab(tabId) {
// Скрыть все вкладки
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.classList.remove('active');
});
// Показать выбранную вкладку
document.getElementById(tabId).classList.add('active');
}
function updateTab1Description() {
const description = document.getElementById('tab1Description').value;
document.getElementById('tab1Text').textContent = description;
}
function updateTab2Description() {
const description = document.getElementById('tab2Description').value;
document.getElementById('tab2Text').textContent = description;
}
</script>
</body>
</html>
```
### Как работает этот код:
1. **HTML-страница**:
- Две кнопки для переключения между вкладками.
- Каждый tab содержит текстовое поле для ввода описания и кнопку для сохранения этого описания.
- Параграф для отображения сохраненного описания.
2. **CSS**:
- Стили для скрытия и отображения содержимого вкладок.
3. **JavaScript**:
- Функция `showTab(tabId)` переключает видимость вкладок.
- Функции `updateTab1Description()` и `updateTab2Description()` сохраняют и отображают введенное пользователем описание в соответствующих вкладках.
Таким образом, при возврате к Tabs1 новое или изменённое описание будет отображаться корректно, поскольку оно сохраняется в текстовом поле и отображается при каждом показе этой вкладки.