javascript - 在 CSS 中定义自适应边界线

Question

我正在使用 JavaScript 创建包含更改内容的选项卡。

我希望标签内容有边框，但“事件”标签(用户当前正在阅读/使用的标签)将没有边框线，如下所示:



问题是我无法让顶部边框留在内容部分，而是在标签上方，如您在此 codepen 中所见。 (红色边框)。

我正在使用这个 CSS 代码来放置边框:

.toggle .panels .panel:after{
  content:'';
  width:34.3%;
  height:4px;
  background:gray;
  position: absolute;
  top:-1px;
}

另一个问题是我不知道如何调整边框以跳过事件选项卡，这意味着，一旦用户切换选项卡，边框就会从事件选项卡中消失(如上图所示)，但所有其他选项卡都会有边界在他们之下。

如何调整边框以跳过事件选项卡并修复其在屏幕上的位置？

Answer 1

你去那里它不是一个完美的解决方案，而是一个黑客

Replace below styles with the current one

.toggle .tabs .tab.active {
        color: #dd4b39;
        background: white;
        border-right: 1px solid black;
        border-top: 1px solid black;
        border-left: 1px solid black;
        z-index: 11;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        overflow: hidden;
    }
    .panels {
        border-top: 1px solid #000;
        margin-top: -2px;
    }

片段

(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);

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);
/*Tabs animation*/
.toggle {
  margin: 0 auto;
  width: 100%;
  font-family: "Raleway";
  direction: rtl;
}
.toggle .tabs {
  position: absolute;
  margin-top: -32px;
  overflow: hidden;
  line-height: 36px;
}
.toggle .tabs .tab:hover {
  background: #e6e6e6;
}
.toggle .tabs .tab {
  float: right;
  background: #a3a3a3;
  color: #444;
  height: 31px;
  cursor: pointer;
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.toggle .tabs .tab.active {
    color: #dd4b39;
    background: white;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-left: 2px solid black;
    z-index: 11;
    border-bottom: 2px solid #fff;
    margin-bottom: -2px;
    overflow: hidden;
}
.toggle .panels .panel {
  background: white;
  padding: 20px 10px;
  display: none;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}
.panels {
    border-top: 2px solid #000;
    margin-top: -2px;
}
.toggle .panels .panel:first-child {
  display: block;
}
.toggle .tabs .tab.active {
    color: #dd4b39;
    background: white;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-left: 1px solid black;
    z-index: 11;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    overflow: hidden;
}
.panels {
    border-top: 1px solid #000;
    margin-top: -2px;
}

<br/>
<br/>
<br/>
<br/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
<div class='toggle'>
          <div class='tabs'>
            <div class='tab active' style="padding-right: 20px; padding-left: 20px;">אא</div>
            <div class='tab' style="padding-right: 20px; padding-left: 20px;">בבב</div>
            <div class='tab' style="padding-right: 20px; padding-left: 20px;">גגגג</div>
            <div class='tab' style="padding-right: 20px; padding-left: 20px;">דדדדד</div>
          </div>
          <div class='panels'>
            <div class='panel'>פאנל 1</div>
            <div class='panel'>פאנל 2</div>
            <div class='panel'>פאנל 3</div>
            <div class='panel'>פאנל 4</div>
          </div>
        </div>