Заглавная страница: различия между версиями
Материал из wiki innovation station ss14
Userr (обсуждение | вклад) Нет описания правки Метка: отменено |
Userr (обсуждение | вклад) Нет описания правки Метка: отменено |
||
| Строка 55: | Строка 55: | ||
<div id="tab1" class="tab-content active"> | <div id="tab1" class="tab-content active"> | ||
[[File: | [[File:Image1.jpg|300px]] | ||
</div> | </div> | ||
<div id="tab2" class="tab-content"> | <div id="tab2" class="tab-content"> | ||
[[File: | [[File:Image2.jpg|300px]] | ||
</div> | </div> | ||
<script> | <script> | ||
function showTabContent(tabId) { | function showTabContent(tabId) { | ||
document.querySelectorAll('.tab-button, .tab-content').forEach(function(el) { | document.querySelectorAll('.tab-button, .tab-content').forEach(function(el) { | ||
el.classList.remove('active'); | el.classList.remove('active'); | ||
}); | }); | ||
document.querySelector('.tab-button[onclick="showTabContent(\'' + tabId + '\')"]').classList.add('active'); | document.querySelector('.tab-button[onclick="showTabContent(\'' + tabId + '\')"]').classList.add('active'); | ||
document.getElementById(tabId).classList.add('active'); | document.getElementById(tabId).classList.add('active'); | ||
} | } | ||
</script> | </script> | ||
Версия от 22:32, 12 ноября 2024
<style> .tab-buttons {
display: flex; border-bottom: 1px solid #333;
} .tab-button {
padding: 5px 10px; cursor: pointer; border: 1px solid #333; border-bottom: none; margin-right: 5px; background-color: #1a1a1a; color: #fff;
} .tab-button.active {
background-color: #333; border-top: 2px solid #4a90e2;
} .tab-content {
display: none; padding: 10px; border: 1px solid #333; background-color: #1a1a1a; color: #fff;
} .tab-content.active {
display: block;
} </style>
<script> function showTabContent(tabId) {
document.querySelectorAll('.tab-button, .tab-content').forEach(function(el) {
el.classList.remove('active');
});
document.querySelector('.tab-button[onclick="showTabContent(\ + tabId + '\')"]').classList.add('active');
document.getElementById(tabId).classList.add('active');
} </script>
