自定义选项卡选项卡，如下所示

标准的HTML格式

在设计选项卡之前，请对HTML格式进行标准化。




面板1
面板2



这是面板1。


这是面板2







如上面的代码所示，没有太多的类的名字被宣布，只有容器类m-tab-container和主动式有源两类。其他元素的风格在两类一层一层，然后设置。

设计的CSS样式


m-tab-container {。
显示：flex；
}
。m-tab-container > UL，。m-tab-container > div {
填充：0；
保证金：0；
}
m-tab-container > UL {。
Flex：0；
最小宽度：50px；
}
m-tab-container > div {。
职位：相对；
Flex：1；
边境：1px solid # DDD；
背景颜色：# FFF；
填料：10px；
Z指数：2；
}
m-tab-container > >里{ UL。
显示块；
保证金：0 0 5px 0；
}
.m-tab-container>ul>li>a{
职位：相对；
行高：40px；
显示块；
宽度：100%；
文本对齐：中心；
文字装饰：无；
背景颜色：# FFF；
边境：1px solid # DDD；
边界权：0；
Z指数：1；
}
> > >里。m-tab-container UL一，
。m-tab-container > 李。主动>：悬停，
。m-tab-container > 李。主动>一：链接，
。m-tab-container > 李。主动>一：参观，
。m-tab-container > 李。主动：主动{ >
颜色：# 000；
}
。m-tab-container > 李。主动>一{
Z指数：3；
}
m-tab-container > > div { div。
显示：无；
}
m-tab-container > > div.active { div。
显示块；
}
m-tab-container > > li.active UL，
。m-tab-container > 李。主动>一{
游标：默认值；
}




李在一个标签显示设置为块，长度超过李，画面可以覆盖形成的空缺的内容（DIV面板框架试验后，李将在1像素，面板的结构和内容，你也可以用保证金李和DIV重叠，然后用李框架覆盖div）。

结合JS代码


（函数（$）{）
工作后加载页面
$（div.m-tab-container李），（单击
E.preventDefault（）；
您可以单击这里判断是否已经激活了标记。
$（主动）。RemoveClass（主动）；
$（这）。最近（礼），AddClass（主动）
$（$（this）。Attr（href）），AddClass（主动）；
}）
}（jQuery）；



以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。