Заглавная страница

<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>