Блог

Главная - Вопросы по программированию - Манипуляции с DOM на JavaScript, чтобы сделать вкладку отзывчивой на мобильных устройствах

Манипуляции с DOM на JavaScript, чтобы сделать вкладку отзывчивой на мобильных устройствах

#html #css #dom

#HTML #css #dom

Вопрос:

    <section class="tab-buttons tab container" id="tab-buttons">
      <button class="tablinks" onclick="openTab(event, 'panel-1')">
        Fact Sheets
      </button>
      <button class="tablinks active" onclick="openTab(event, 'panel-2')">
        Videos
      </button>
      <button class="tablinks" onclick="openTab(event, 'panel-3')">
        Images
      </button>
      <button class="tablinks" onclick="openTab(event, 'panel-4')">
        Reports
      </button>
    </section>

введите описание изображения здесь

Это панель вкладок, которую я создал, я хотел разбить эту вкладку на две или более вкладок, и каждая вкладка содержала только два элемента, если она находится на мобильном устройстве, как я могу это сделать, используя манипуляции с dom на javascript, я добавлю изображение ниже, вот как я хотел быть намобильное устройство,

введите описание изображения здесь

Комментарии:

1. Обычно это доступно через CSS и не требует никаких манипуляций с DOM на Javascript. w3schools.com/css/css_rwd_grid.asp Если вы используете библиотеку пользовательского интерфейса, такую как bootstrap или Ionic, она должна предоставить вам готовые образцы для этого

Ответ №1:

Используйте медиа-запрос в css для максимальной ширины -768 пикселей