使用<div>和<a>

Question

I've got a page that has a tabbed menu at the top. I'm getting the menu to work just fine. However, the active tab still has a bottom border on it and I'd like that border to go away.

You can see the entirety of my test code here获取活动标签下的底部边框。

我找到了几个有解决方案的地方，但他们都使用<ul>和<li>来制作标签，并且我已锁定使用<div>和{{1标签。为列表标签提供的解决方案似乎不适用于div和锚点实现。

基本上，我的代码目前看起来像这样。

我需要它看起来更像这样。

感谢。

Answer 1

最简单的方法：

从 div.tab {

中删除

border-bottom: 1px solid #ccc;

从 .tabcontent

中删除

border-top: none;

添加到 .tabcontent

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

最后添加到 div.tab a.active

border-bottom: 1px solid #fff;

Answer 2

一个技巧是将标签重叠在下面的<div>上。将活动选项卡的类设置为position：absolute（并且您还需要降低选项卡的高度，否则侧边框将向下延伸到下面的div中。）这是一个快速而脏的chrome控制台技巧，所以在你的设计中彻底测试。