Question

基于Tab导航选项卡的问题

图1

图2

图3

比如这个选项卡推荐下就是这个内容高度比如是300px ，女装 男装 童装高度高于推荐的高度比如 500px 600px 700px，

我在选项卡下做一个新的div红色选框 这个div怎么实现基于tab里面内容的高度而往下移而不是像图2一样被覆盖

图1 的高度是300px 我在300下面做的div 图2是500px 覆盖了红色div 图3是我想要的效果 随着tab里面内容的高度上下浮动 CSS怎么写 求大神





Answer 1

简单的写法，每个选下卡下面写个div，这样就不会覆盖了
稍复杂的写法：你可以写一个div，不要用浮动，定位等影响层级关系的样式。

追问

你是意思是 我在推荐 女装 男装 下面都写div高度 ？

追答

嗯，
或是用一个div，在js里面来限制这个div的高度。

追问

我试一试

Answer 2

【一个页面多个tab共用一个js已经发给你了】

》》思路：利用上面的背景是可以遮住下面的背景原理。。。。搞定。。。当然还有更多的办法
》》方法：
首先你的那个红色当前箭头背景是放在 li.active里面的背景 ，定位于下面。
然后切灰色边框平铺 作为背景放在tab-arrow 里面，背景定位于下面。

》》注意：
【1】注意红色直线部分要和下面灰色线条高度一样，除去上面的小三角形高度。
【2】tab-arrow要有一个高度并且和里面的li高度一致。

悲剧。。。。。。

追问

大神你发哪里了
不是背景 我里面没写内容
我想要的效果就是图1 图3 一样 在图1的时候我点女装是图3 的效果 点回来还是图1的效果
而不是图2那样覆盖了
就是随tab里面的内容的高度而上下浮动 不是固定位置

Answer 3

你是不是把 红色的div写在选项卡的div里了

追问

没有 我写在外面的 但是会像图2一样被覆盖