Как сделать меню вкладками как у МВидео?

Чтобы создать меню вкладками, похожее на меню на сайте МВидео, вам потребуется использовать некоторые техники CSS и HTML, а также немного JavaScript.

Вот подробные шаги, которые помогут вам создать такое меню:

1. Создайте списком ссылок меню в HTML. Например:

<ul class="menu">
  <li><a href="#section1">Вкладка 1</a></li>
  <li><a href="#section2">Вкладка 2</a></li>
  <li><a href="#section3">Вкладка 3</a></li>
</ul>

2. Добавьте стили CSS для меню. Например:

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

.menu li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.menu li a:hover {
  background-color: #ccc;
}

3. Теперь добавьте JavaScript код, чтобы обрабатывать клики по вкладкам и показывать соответствующие секции с контентом. Например:

// Перебираем все ссылки меню и добавляем обработчики кликов
document.querySelectorAll('.menu a').forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // Предотвращаем переход по ссылке
    
    // Получаем ID целевой секции из атрибута href ссылки
    var target = this.getAttribute('href');
    
    // Скрываем все секции с контентом
    document.querySelectorAll('.content').forEach(function(section) {
      section.style.display = 'none';
    });
    
    // Показываем только целевую секцию с контентом
    document.querySelector(target).style.display = 'block';
  });
});

4. Создайте секции с контентом, соответствующим каждой вкладке. Например:

<div class="content" id="section1">Контент для первой вкладки</div>
<div class="content" id="section2">Контент для второй вкладки</div>
<div class="content" id="section3">Контент для третьей вкладки</div>

5. Добавьте стили CSS для секций с контентом. Например:

.content {
  display: none;
  padding: 20px;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin-top: 10px;
}

После примененных выше шагов, вы должны получить меню вкладками, где при клике на каждую вкладку отображается соответствующая секция с контентом. Вы можете дополнительно стилизовать меню и секции с помощью CSS, чтобы они соответствовали вашим требованиям дизайна. Важно отметить, что вышеуказанный код примерный и может потребоваться некоторая доработка в зависимости от требований вашего проекта.