Заглавная страница: различия между версиями
Материал из wiki innovation station ss14
Userr (обсуждение | вклад) Нет описания правки Метка: ручная отмена |
Userr (обсуждение | вклад) Нет описания правки Метка: отменено |
||
| Строка 16: | Строка 16: | ||
rect 163 250 780 436 [https://discord.gg/EExMAkr2TB Ссылка на Discord] | rect 163 250 780 436 [https://discord.gg/EExMAkr2TB Ссылка на Discord] | ||
</imagemap> | </imagemap> | ||
<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> | |||
<div class="tab-buttons"> | |||
<div class="tab-button active" onclick="showTab(1)">Политическая</div> | |||
<div class="tab-button" onclick="showTab(2)">Торговых магистралей</div> | |||
</div> | |||
<!-- Содержимое вкладок --> | |||
<div id="tab1" class="tab-content active"> | |||
[[File:wikitwo.png|300px]] | |||
</div> | |||
<div id="tab2" class="tab-content"> | |||
[[File:Заглавная-Страница.png|300px]] | |||
</div> | |||
<script> | |||
function showTab(tabNumber) { | |||
// Убираем класс 'active' у всех вкладок и контента | |||
document.querySelectorAll('.tab-button, .tab-content').forEach(function(el) { | |||
el.classList.remove('active'); | |||
}); | |||
// Добавляем класс 'active' к выбранной вкладке и контенту | |||
document.querySelector('.tab-button:nth-child(' + tabNumber + ')').classList.add('active'); | |||
document.getElementById('tab' + tabNumber).classList.add('active'); | |||
} | |||
</script> | |||
Версия от 22:27, 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 showTab(tabNumber) {
// Убираем класс 'active' у всех вкладок и контента
document.querySelectorAll('.tab-button, .tab-content').forEach(function(el) {
el.classList.remove('active');
});
// Добавляем класс 'active' к выбранной вкладке и контенту
document.querySelector('.tab-button:nth-child(' + tabNumber + ')').classList.add('active');
document.getElementById('tab' + tabNumber).classList.add('active');
} </script>
