如何做一个tab栏下划线跟随选中的li移动

最新推荐文章于 2024-04-15 10:42:12 发布
最新推荐文章于 2024-04-15 10:42:12 发布
阅读量676 收藏 1
点赞数
分类专栏： 三大基础语言 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/112395574
版权

在这里插入图片描述在这里插入图片描述
第一个知识要想让标签有选中状态（active）就添加样式
在这里插入图片描述

要实现这样的效果需要jquery和伪元素，由于每个字数不一样，纯用Jquery让它left移动比较难对齐。
我们可以借鉴华为云，
页面结构大概这样
在这里插入图片描述在这里插入图片描述以上代码是添加类
在这里插入图片描述
在这里插入图片描述思路:给ul设置宽度和相对定位，给li加伪元素和绝对定位，这样下划线就能定好位，并且随着浏览器宽度变化也不会改变，首先先宽度设置为0，这样就不会显示出来，然后有active状态之后，再让它有宽度就能显示出来了
在这里插入图片描述如果希望宽度和li标签一样长
在这里插入图片描述

16px不一定对，可以自己试试

野生小米椒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2/3 - 菜单导航栏下划线跟随效果动画，鼠标移入后下划线滑动出现且跟随的效果（高效简洁源代码运行示例）
高级前端工程师
02-07 1709
css 鼠标下划线线跟随效果vue实现导航栏下划线跟随动画css html react实现导航栏下划线跟随鼠标滑动效果css实现导航栏下划线跟随效果nuxt实现导航栏下划线跟随效果css光标下划线跟随效果简单带下划线跟随效果的CSS3下拉菜单特效css 导航栏下划线跟随效果使用CSS怎么实现导航栏下划线跟随效果纯CSS实现导航栏下划线跟随滑动效果纯CSS实现鼠标滑过下划线跟随效果CSS实现鼠标经过导航的超链接时显示下划线效果纯CSS怎么实现导航栏下划线跟随效果不可思议的纯CSS导航栏下划线跟随效果
在vue中制作tab标签或导航下划线跟随效果
qq_49173190的博客
06-17 2302
vue小技巧/tab栏
tab随下划线同步滑动
03-19
tab随下划线同步滚动，方便大家的引用以及调用
tab 切换下划线跟随实现
weixin_34061555的博客
09-17 2973
HTML 结构如下： <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> <li>光标小下划线跟随</li> <li>PURE CSS</li> <li&...
纯CSS实现导航栏下划线跟随滑动效果
12-11
老规矩先上张图，如何使用纯 CSS 制作如下效果？   在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？ 定义需求 我们定义一下简单的规则，要求如下： 假设 HTML 结构如下： 不可思议的CSS 导航栏 光标小下划线跟随 PURE CSS<
tab跟随底部横线滑动
09-26
tab切换并且底部横线跟随点击选中目标滑动。
js实现移动端tab切换时下划线滑动效果
10-16
在示例中，我们有一个`<ul>`列表，包含了多个`<li>`元素，每个`<li>`代表一个Tab选项。其中，`<li>`元素带有`class="active"`表示默认选中状态，并且还有一个`data-index`属性用于存储选项的索引。例如： ```html ...
web前端开发学习总结，8个优秀的CSS实践
m0_60305422的博客
07-22 293
基础能力 HTML(5)篇 1. html 基本结构 html 标签是由<>包围的关键词。 html 标签通常成对出现，分为标签开头和标签结尾。 有部分标签是没有结束标签的，为单标签，单标签必须使用 / 结尾。 页面所有的内容，都在 html 标签中。 html 标签分为三部分：标签名称，标签内容，标签属性。 html 标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页 结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内 容。 标签的内容是在一对标签内部的内
计计算机专用英语（常用1695个单词，带音标） 欢迎评论转发
0x8g1T9E-
04-16 7821
计算机专用英语（常用1695个单词，带音标） 《电脑专业英语》 1. file [fail] n. 文件；v. 保存文件 2. command [k..mɑ:nd] n. 命令，指令 3. use [ju:z, ju:s] v. 使用，用途 4. program [.pr.ugr.m] n. 程序 5. line [lain] n. (数据，程序)行，线路 6. if [if] co...
Android自定义view解决TabWidget 的下方的横线（Strip）颜色问题
01-14
http://blog.csdn.net/birdno1/article/details/50516725 通过自定义view解决tabwidget下划线颜色问题
tabs切换跟随线，切换tab时候跟随线平滑移动
qq_48546536的博客
12-26 427
tabs切换跟随线，切换tab时候跟随线平滑移动
js+css制作导航栏下划线跟随动画，App+H5点击效果
qq1219579255的博客
03-15 4113
这是使用Vue制作的一个下划线跟随效果，没有使用其他插件
TabWidget去除底部下划线
west8623的专栏
04-20 4308
采用TabHost布局时，往往会发现默认的系统风格与软件风格很不协调，比如TabWidget的下划线影响布局效果。通常情况下会去除其下划线。如果是采用xml布局文件，在TabWidget的属性项设置android:tabStripEnabled=”false”（经测试发现，这个属性是在2.2版本以上才能使用），这样能达到去除下划线的目的。 但是如果使用代码去除下划线，情况就比较复杂，就需要根据不
css 导航栏下划线跟随效果，默认第一个li为选中状态
lixiwoaini的博客
01-29 9555
本次主要是联系css实现导航栏下划线跟随效果 HTML： &lt;ul id="list"&gt; &lt;li class="current_li"&gt;&lt;a href="#" class="current"&gt;全部&lt;/a&gt;&lt;/li&gt; &lt;li&gt;
qt 快捷键 下划线_如何使Windows 10下划线和突出显示菜单快捷键
09-17 518
qt 快捷键 下划线Menu shortcut keys provide a fast and easy way to navigate through specific applications in Windows. They work by underlining the key to press on menus to activate commands or expand submenu...
纯css导航栏下标线跟随效果
幸福有多远
04-04 2179
前言:看着效果不错，仿做了一下，其实就是c3动画移动div伪装的下边框线主要：li的结束标签与第二项的li开始标签不要有空格及换行，消除间隙css* { box-sizing: border-box; } * { margin: 0; padding: 0; } #main { position: relative; ...
TabWidget去除底部下划线_横线
lijin_2009的专栏
11-13 2276
TabWidget去除底部下划线 采用TabHost布局时，往往会发现默认的系统风格与软件风格很不协调，比如TabWidget的下划线影响布局效果。通常情况下会去除其下划线。如果是采用xml布局文件，在TabWidget的属性项设置android:tabStripEnabled=”false”（经测试发现，这个属性是在2.2版本以上才能使用），这样能达到去除下划线的目的。但是如果使用代码去除下划
随着页面的滚动导航条跟着滚动
最新发布
qq_43757976的博客
04-15 449
b) scrollHeight：内容的实际高度 + 上下 padding(如果没有限制div的height,即height是自适应的，一般是scrollHeight == clientHeight)获取整个文档scrollTop,IE是document.documentElement.scrollTop,FF/CH是document.body.scrollTop;c) offsetHeight： 可理解为div的可视高度，样式的height +上下padding + 上下border-width;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值