|
|
| Строка 19: |
Строка 19: |
|
| |
|
|
| |
|
| <style>
| | == Политическая == |
| .tab-buttons {
| | [[File:Image1.jpg|300px]] |
| 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="showTabContent('tab1')">Политическая</div>
| |
| <div class="tab-button" onclick="showTabContent('tab2')">Торговых магистралей</div>
| |
| </div>
| |
|
| |
|
| <div id="tab1" class="tab-content active">
| | == Торговых магистралей == |
| [[File:Image1.jpg|300px]]
| | [[File:Image2.jpg|300px]] |
| </div>
| |
| <div id="tab2" class="tab-content">
| |
| [[File:Image2.jpg|300px]]
| |
| </div>
| |
|
| |
|
| <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>
| |
