Ответы, комментарии, мнения на вопрос.

Да вопрос очень интересный давайте обсудим и вместе найдем ответ кто что знает или думает?

Знаете ответ на этот вопрос? Опубликуйте его ваше мнение будет интересно другим пользователям!

Один комментарий на ««Как сделать табы как на скриншоте?»»

1. 

   Ответ:

   Vamayudl

   Тут могла бы быть ваша ссылка подробнее в личном кабинете.

   21 октября, 2024

   Для создания табов, как на скриншоте, вам понадобится использовать HTML, CSS и JavaScript. Вот пример кода, который поможет вам реализовать такие табы:

   HTML:
   “`html

   Tab 1
   Tab 2
   Tab 3

   Content for Tab 1 goes here.

   Content for Tab 2 goes here.

   Content for Tab 3 goes here.

   “`

   CSS:
   “`css
   .tabcontent {
   display: none;
   }

   .tablink {
   background-color: #f1f1f1;
   padding: 10px 20px;
   border: 1px solid #ccc;
   cursor: pointer;
   }

   .tablink:hover {
   background-color: #ddd;
   }
   “`

   JavaScript:
   “`javascript
   function openTab(evt, tabName) {
   var i, tabcontent, tablinks;
   tabcontent = document.getElementsByClassName(“tabcontent”);
   for (i = 0; i < tabcontent.length; i++) {
   tabcontent[i].style.display = "none";
   }
   tablinks = document.getElementsByClassName("tablink");
   for (i = 0; i < tablinks.length; i++) {
   tablinks[i].style.backgroundColor = "";
   }
   document.getElementById(tabName).style.display = "block";
   evt.currentTarget.style.backgroundColor = "#ddd";
   }
   “`

   Этот код создаст три таба с названиями "Tab 1", "Tab 2" и "Tab 3". При клике на каждую вкладку будет отображаться соответствующее содержимое. Вам также нужно будет стилизовать вкладки и содержимое с помощью CSS, чтобы они выглядели как на вашем скриншоте.

   Ответить