时间戳

首页 > 解决方案 > 如何使导航选项卡响应

jquery - 如何使导航选项卡响应

问题描述

现在我有如下导航标签设计

  menu 1   menu 2    menu 3

但是当屏幕变小时，导航标签的设计就像

  menu 1    menu 2
   menu 3

如何使导航选项卡变得垂直？

我尝试过使用一些 jquery 插件技术，但是当我将它结合到我的页面时，它根本不起作用

这是导航选项卡脚本

  <div class="col-md-4">
<!--Begin::Portlet-->     
<div class="m-portlet m-portlet--full-height ">
  <div class="m-portlet__head">
    <div class="m-portlet__head-caption">
      <div class="m-portlet__head-title">
        <h3 class="m-portlet__head-text">
          Title
        </h3>
      </div>
    </div>
    <div class="m-portlet__head-tools">
            <ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm" role="tablist">

        <li class="nav-item m-tabs__item">
          <a class="nav-link m-tabs__link active" data-toggle="tab" href="#hour" role="tab" id="hour" value="hour" onClick="hour()">
          Hours
          </a>
        </li>
        <li class="nav-item m-tabs__item">
                    <a class="nav-link m-tabs__link" data-toggle="tab" href="#minutes" role="tab" id="minutes" value="minutes" onClick="minutes()">
                    Minutes
                    </a>
        </li>
        <li class="nav-item m-tabs__item">
          <a class="nav-link m-tabs__link" data-toggle="tab" href="#day" role="tab" id="day" value="day" onClick="day()">
          Days
          </a>  
        </li>
            </ul>
        </div>
  </div>
  <div class="m-portlet__body">
    <div class="tab-content">
  <div class="tab-pane active" id="minutes">
        <div id="chart_div2"></div>
      </div>
      <div class="tab-pane" id="hour">
        <div id="chart_div2"></div>
      </div>
      <div class="tab-pane" id="day">
        <div id="chart_div2"></div>
      </div>
    </div>
  </div>
</div>
<!--End::Portlet-->   
</div>

谢谢

标签： jqueryresponsivenav

解决方案

您正在尝试使用 JavaScript 解决 CSS 问题。您想要的是使用 CSS 媒体查询并为不同的屏幕尺寸创建不同的样式。

推荐阅读