Javascript 在CSS中定义可调整的边界线

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

我希望选项卡内容有边框，但“活动”选项卡（用户当前正在阅读/使用的选项卡）将没有边框线，如下所示：

问题是我不能让上边框停留在内容部分，相反，它位于选项卡上方，正如您在这里看到的（边框用红色表示）

我使用CSS代码来设置边框：

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

另一个问题是，我不知道如何调整边框以跳过活动选项卡，这意味着，一旦用户切换选项卡，边框将从活动选项卡中消失（如上图所示），但所有其他选项卡下都会有边框

---

如何调整边框以跳过活动选项卡并固定其在屏幕上的位置？

对于第二个问题，我将CSS编辑为：

.toggle .tabs .tab {
  float: right;
  background: #a3a3a3;
  color: #444;
  height: 31px;
  cursor: pointer;
  border-bottom:2px 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;
  border-bottom:none;
}

---

好了，这不是一个完美的解决方案，而是一个黑客

将以下样式替换为当前样式

片段

（函数（）{
$（函数（）{
var切换；
返回切换=新切换（'.toggle'）；
});
this.Toggle=（函数（）{
Toggle.prototype.el=null；
Toggle.prototype.tabs=null；
Toggle.prototype.panels=null；
函数切换（toggleClass）{
this.el=$（toggleClass）；
this.tabs=this.el.find（“.tab”）；
this.panels=this.el.find（“.panel”）；
这个。bind（）；
}
Toggle.prototype.show=函数（索引）{
var-activePanel，activeTab；
this.tabs.removeClass（'active'）；
activeTab=this.tabs.get（索引）；
$（activeTab）.addClass（'active'）；
this.panels.hide（）；
activePanel=this.panels.get（索引）；
返回$（activePanel.show（）；
};
Toggle.prototype.bind=函数（）{
var_this=这个；
返回此.tabs.unbind（'click'）.bind（'click'，函数（e）{
返回_this.show（$（e.currentTarget.index（））；
});
};
返回开关；
})();
}).打电话（这个）
@导入url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);
/*选项卡动画*/
.切换{
保证金：0自动；
宽度：100%；
字体系列：“雷威”；
方向：rtl；
}
.切换.选项卡{
位置：绝对位置；
边缘顶部：-32px；
溢出：隐藏；
线高：36px；
}
.toggle.tabs.tab:悬停{
背景：#e6；
}
.toggle.tabs.tab{
浮动：对；
背景#a3a3；
颜色：#444；
高度：31px；
光标：指针；
右边框：1px纯黑；
边框顶部：1件纯黑；
左边框：1px纯黑；
}
.toggle.tabs.tab.active{
颜色：#dd4b39；
背景：白色；
右边框：2倍纯黑；
边框顶部：2件纯黑；
左边框：2倍纯黑；
z指数：11；
边框底部：2倍实心#fff；
边缘底部：-2px；
溢出：隐藏；
}
.切换.面板.面板{
背景：白色；
填充：20px 10px；
显示：无；
右边框：1px纯黑；
边框底部：1px纯黑；
左边框：1px纯黑；
}
.小组{
边框顶部：2个实心#000；
页边顶部：-2px；
}
.toggle.panel.panel:第一个子级{
显示：块；
}
.toggle.tabs.tab.active{
颜色：#dd4b39；
背景：白色；
右边框：1px纯黑；
边框顶部：1件纯黑；
左边框：1px纯黑；
z指数：11；
边框底部：2倍纯色透明；
边缘底部：-1px；
溢出：隐藏；
}
.小组{
边框顶部：1px实心#000；
页边顶部：-2px；
}








אא
בבב
גגגג
דדדדד
פאנל 1
פאנל 2
פאנל 3
פאנל 4
我想你需要它

.toggle .tabs .tab.active{
    border-bottom: 2px solid red;
}

检查以下代码段是否满足您的需要：

刚从codepen修改了你的代码


（函数（）{
$（函数（）{
var切换；
返回切换=新切换（'.toggle'）；
});
this.Toggle=（函数（）{
Toggle.prototype.el=null；
Toggle.prototype.tabs=null；
Toggle.prototype.panels=null；
函数切换（toggleClass）{
this.el=$（toggleClass）；
this.tabs=this.el.find（“.tab”）；
this.panels=this.el.find（“.panel”）；
这个。bind（）；
}
Toggle.prototype.show=函数（索引）{
var-activePanel，activeTab；
this.tabs.removeClass（'active'）；
activeTab=this.tabs.get（索引）；
$（activeTab）.addClass（'active'）；
this.panels.hide（）；
activePanel=this.panels.get（索引）；
返回$（activePanel.show（）；
};
Toggle.prototype.bind=函数（）{
var_this=这个；
返回此.tabs.unbind（'click'）.bind（'click'，函数（e）{
返回_this.show（$（e.currentTarget.index（））；
});
};
返回开关；
})();
}).打电话（这个）
@导入url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);
/*选项卡动画*/
.切换{
保证金：0自动；
宽度：50%；
字体系列：“雷威”；
方向：rtl；
}
.切换.选项卡{
位置：绝对位置；
边缘顶部：-32px；
溢出：隐藏；
线高：36px；
}
.toggle.tabs.tab:悬停{
背景：#e6；
}
.toggle.tabs.tab{
浮动：对；
背景#a3a3；
颜色：#444；
高度：31px；
光标：指针；
边框：1px纯黑；/*添加了此行*/
}
.toggle.tabs.tab.active{
z指数：2；
颜色：#dd4b39；
背景：白色；
高度：32px；/*添加此行*/
边界底部：0；
}
.切换.面板.面板{
背景：白色；
填充：20px 10px；
显示：无；
边框：1px纯黑；/*添加了此行*/
z指数：0；
}
.toggle.panels:之后{
z指数：0；
内容：''；
宽度：50%；
高度：1px；
背景：黑色；
位置：绝对位置；
顶部：-1px；
}
.toggle.panel.panel:第一个子级{
显示：块；
}





אא
בבב
גגגג
דדדדד
פאנל 1
.toggle .tabs .tab.active{
    border-bottom: 2px solid red;
}