Javascript 使用<；从活动选项卡获取底部边框；部门>；及<；a>；

我有一个页面，上面有一个选项卡式菜单。我把菜单准备好了。但是，活动选项卡上仍然有一个底部边框，我希望该边框消失

您可以看到我的整个测试代码

我找到了好几个有解决方案的地方，但它们都使用

和
来制作选项卡，我被锁定在
和

我需要它看起来更像这样


谢谢。
那么最简单的方法就是：

从div.tab{

border-bottom: 1px solid #ccc;

从.tabcontent中删除

border-top: none;

border-top: 1px solid #ccc;
margin-top: -1px;

添加到.tabcontent

border-top: none;

border-top: 1px solid #ccc;
margin-top: -1px;

最后添加到div.tab a.active

border-bottom: 1px solid #fff;

一个技巧是将选项卡重叠在下面的
上。将活动选项卡的类设置为position:absolute（您还需要降低选项卡的高度，否则侧边框将粘到下面的div中）。这是一个快速而肮脏的chrome控制台技巧，因此在您的设计中进行彻底的测试


您可以使用伪元素将边框线放置在选项卡下方，而不是在
.tab
栏上使用
边框底部（将边框线放置在选项卡下方），以使其覆盖白色背景。这是一个实时演示

（我已将您的代码复制到Stack Overflow并对其进行了修改。以后，请在您的问题中包含所有代码，而不是外部资源。）


/*设置选项卡的样式*/
分区选项卡{
溢出：隐藏；
背景色：#fff；
位置：相对位置；
}
/*设置底部边框的样式*/
div.tab:：before{
内容：''；
背景色：#ccc；
高度：1px；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
/*设置选项卡内按钮的样式*/
分区表a{
浮动：左；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
位置：相对位置；
}
/*更改悬停按钮的背景色*/
分区选项卡a：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
分区选项卡a激活{
背景色：#fff；
边框顶部：3倍实心rgb（30、18、197）；
左边框：1px实心#ccc；
右边框：1px实心#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}

伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都

东京
东京是日本的首都

请阅读。当外部资源消失或被修复时，依赖于外部资源理解的问题将变得无用。创建一个并将其放在问题本身中。我非常确定
ul
+
li
方法将与
div
+
a
标记结构配合使用。大多数选项卡bed content systems只是将选项卡覆盖在较大的底部边框上，这样就看不见了。如果没有任何HTML或CSS，我无法帮助指出您在特定设置中是如何做到这一点的。@Quentin我在这里使用了顶针，就像我看到有人使用JSFIDLE或其他网站转储示例一样。链接不是指向我的网站。@AndrewCooper-it I这不是Stackoverflow。An需要在Stackoverflow上。@Quentin好的。下次可以。谢谢你的反馈。他们有。他们都有4个边框。不，请再次检查。
.tabcontent{border top:none；}
非常抱歉。你完全正确。我的浏览器在
border:1px solid\ccc；