JavaScript DOM操作以使选项卡在移动设备上响应

Question

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

​

​

这是我创建的标签栏，我想让这个标签分成两个或更多个标签，每个标签只包含两个项目，如果它在移动设备上，我如何使用javascript dom操作来做到这一点，我将添加下面的图像，这是我希望在移动设备上的方式。

​

​

Answer 1

在css中使用媒体查询以获取max-width-768px