Question

我有以下标签，在较小的屏幕中，我想让它们响应。当前，当我缩小屏幕时，最后一个选项卡才消失。最好的情况是...在较小的屏幕中，选项卡将开始堆叠在第一个选项卡的下方。关于如何实现这一点的任何想法？

(function() {
  $(function() {
    var toggle;
    return toggle = new Toggle('.toggle');
  });

  this.Toggle = (function() {
    Toggle.prototype.el = null;

    Toggle.prototype.tabs = null;

    Toggle.prototype.panels = null;

    function Toggle(toggleClass) {
      this.el = $(toggleClass);
      this.tabs = this.el.find(".tab");
      this.panels = this.el.find(".panel");
      this.bind();
    }

    Toggle.prototype.show = function(index) {
      var activePanel, activeTab;
      this.tabs.removeClass('active');
      activeTab = this.tabs.get(index);
      $(activeTab).addClass('active');
      this.panels.hide();
      activePanel = this.panels.get(index);
      return $(activePanel).show();
    };

    Toggle.prototype.bind = function() {
      var _this = this;
      return this.tabs.unbind('click').bind('click', function(e) {
        return _this.show($(e.currentTarget).index());
      });
    };

    return Toggle;

  })();

}).call(this);

.toggle {
  font-family: arial, sans-serif;
}
.toggle .tabs {
  border-bottom: 1px solid grey;
  width: 100%;
  overflow: hidden;
  height: 36px;
  line-height: 36px;
}
.toggle .tabs .tab {
  float: left;
  background: white;
  color: #777777;
  height: 31px;
  margin: 2px 8px 0;
  padding: 0 8px;
  cursor: pointer;
}
.toggle .tabs .tab.active {
  color: #dd4b39;
  border-bottom: 3px solid #dd4b39;
}
.toggle .panels .panel {
  padding: 20px 10px;
  display: none;
}
.toggle .panels .panel:first-child {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle'>
  <div class='tabs'>
    <div class='tab active'>Tab 1</div>
    <div class='tab'>Tab 2</div>
    <div class='tab'>Tab 3</div>
    <div class='tab'>Tab 4</div>
  </div>
  <div class='panels'>
    <div class='panel'>Panel 1</div>
    <div class='panel'>Panel 2</div>
    <div class='panel'>Panel 3</div>
    <div class='panel'>Panel 4</div>
  </div>
</div>

Answer 1

有多种方法可以处理网页响应：

1。）使用flex view使其根据页面大小进行缩放。但这并不能维持多久，因为文本超出了某个点就开始溢出容器。

2。）使用media queries来更改页面不同尺寸的页面布局。 Reference

Answer 2

事实证明这非常简单...我只需要从以下位置删除高度：

.toggle .tabs {
  border-bottom: 1px solid grey;
  width: 100%;
  overflow: hidden;
  height: 36px; ////////delete this here
  line-height: 36px;
}

使标签在较小的屏幕上响应

2 个答案: