Question

tab 菜单的边框线重合是怎么做出来的? （html css JavaScript相关）

如图是网易截图的tab菜单，点击一个标题，下方就显示相应内容。
标题的下边框和内容的上边框是重合的，怎样才能实现重合效果，就是蓝色的边框线条粗细都一样。
怎样设置重合时谁在上面显示？

Answer 1

tab标签做为一个div（以下 称 tdiv）
里面是ul li 结构
内容作为另一个div (以下称 cdiv)

原理就是让 tdiv 成为非标准流！

具体做法，

先让两个div上下并在一起，
cdiv都有边框！
tdiv没有下边框！

然后
tdiv上的css加入(加入边框宽度为1px)

position:relative; top:1px;

意思就是让tdiv成为非标准流，并且是相对定位，top:-1px;
就是让tdiv从原来的位置向下偏移 1px

当点击tab的时候，就用js让激活的tab（也就是li)拥有下边框，并且为白色!
效果就出来了
其实就是白色的边框挡住了cdiv蓝色的边框

Answer 2

这是一个选项页的作法,有很多种作法的!例如可以利用层顺序进行设计!上边的第一个小标题都定义在其border-bottom进行白色的定义,使用时将其层顺序提到前边,也就是变大,一般可以变为2,而内容的那个大的div变为1,其余的标题都是0,这样可以实现这种效果!

第二种是利用css定义,层的顺序不变,改变当前一个标题的border-bottom为白色,这种也比较常用的!这种情况下,所以的小标题都在上边的!等等这种方式多了!