HTML中标签栏的几种实现方法

当前第2页 返回上一页

2、小三角，明显

CSS Code复制内容到剪贴板

1. .service-tabs4 li{position:relative;}

2. .service-tabs4 li a:hover{color:#2CC185;}

3. .service-tabs4 li.on a{background-color:#2CC185;color:#fff;}

4. .service-tabs4 li i{width:11px;height:7px;position:absolute;bottombottom:-6px;left:76px;background:url(images/arrow.png);display:none;}

5. .service-tabs4 li.on i{display:block;}

3、下划线标注

CSS Code复制内容到剪贴板

1. .service-tabs2 li a:hover{color:#2CC185;}

2. .service-tabs2 li.on a{height:78px;border-bottom:2px solid #2CC185;color:#2CC185;}

四、脚本实现

JavaScript Code复制内容到剪贴板

1. $(function(){ $(".service-tabs ul li").click(function() { $(this).addClass("on").siblings().removeClass("on"); }); })

即简洁又很实用，大家学会了吗？赶紧动手操作一下吧。

相关推荐：

html img标签的使用

HTML5新增标签使用方法

html常用的格式标志标签

以上就是HTML中标签栏的几种实现方法的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

Html中如何加下划线？Html<u>标签添加下划线的用法实例

Html代码如何让照片变模糊

Html中如何将字体加粗

Html中div与span对比

Html怎么设置图片按钮

怎么实现Html禁止选择

Html的<address> 标签

Html的<style>标签

Html中address是什么

在Html中如何设置单选按钮

更多相关阅读请进入《Html》频道 >>

书籍

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元   人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » HTML中标签栏的几种实现方法