自定义标签选项卡,具体内容如下
<>强规范HTML格式
在设计选项卡之前,先规范一下HTML的格式。
& lt; div类=癿-tab-container”比;
& lt; ul比;
& lt;李类="活跃"祝辞& lt; a href=" https://www.yisu.com/zixun/# pane1”祝辞面板1 & lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/pane2”rel=巴獠縩ofollow”祝辞面板2 & lt;/a> & lt;/li>
& lt;/ul>
& lt; div>
& lt; div id=皃ane1”类=盎钤尽北?
这是面板1
& lt;/div>
& lt; div id=皃ane2”比;
这是面板2
& lt;/div>
& lt;/div>
& lt;/div>
之前
如上述代码所示,这里并没有声明太多类名,只有容器样式类m-tab-Container和激活样式类活动两个。其他元素的样式都是通过这两个类一层一层往下找然后进行设置。
<强>设计CSS样式
.m-tab-container {
显示:flex;
}
.m-tab-container> ul, .m-tab-container> div {
填充:0;
保证金:0;
}
.m-tab-container> ul {
flex: 0;
min-width: 50 px;
}
.m-tab-container> div {
位置:相对;
flex: 1;
边界:1 px固体# ddd;
background - color: # fff;
填充:10 px;
z - index: 2;
}
李.m-tab-container> ul> {
显示:块;
保证金:0 0 5 px 0;
}
.m-tab-container> ul> li> {
位置:相对;
行高:40像素;
显示:块;
宽度:100%;
text-align:中心;
文字修饰:没有;
background - color: # fff;
边界:1 px固体# ddd;
边境:0;
z - index: 1;
}
.m-tab-container> ul> li>一个,
.m-tab-container> ul> li.active> a:徘徊,
.m-tab-container> ul> li.active>:链接时,
.m-tab-container> ul> li.active> a:访问,
.m-tab-container> ul> li.active>:主动{
颜色:# 000;
}
.m-tab-container> ul> li.active> {
z - index: 3;
}
.m-tab-container> div> div {
显示:没有;
}
.m-tab-container> div> div.active {
显示:块;
}
.m-tab-container> ul> li.active,
.m-tab-container> ul> li.active> {
光标:违约;
}
之前
李里面的一个标签显示设置成块后,长度超过了,能够覆盖掉内容面板的边框形成空缺(经过测试,李设置边框之后和内容面板的div边框相距不足1 px,也可以使用保证金让李和div重叠,然后用李覆盖掉div的边框)。
<>强绑定JS代码
(函数(美元){//页面加载后的工作
$ (" div。m-tab-container李”)。(“点击”,函数(e) {
e.preventDefault ();//可以在这里判断被点击的一个标签是否已经激活
$ (" .active ") .removeClass(“活跃”);
(美元).closest(李).addClass(“活跃”)
((这).attr美元(“href”)) .addClass(“活跃”);
})
})(jQuery);
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
