沙漠-北极熊 2021-08-27 20:06 采纳率: 71.4%
浏览 53
已结题

关于elementui一个样式问题请教各位!

img
如图,刚接触elementui不久,今天接到一个需求,就是用户点击类似这种tabs选项栏后,悬浮的图标要固定显示出来,如图中所示,图中是在上方显示的,需求是点击切换后,在下方显示,我刚开始想到应该是和hover属性有关,但是死活弄不出那个效果,急得我快发癫了,各位铁子们,如果有代码最好,没有的话,留下思路让我参考一下也行,谢谢各位了!

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-08-27 20:20
    关注

    定义一个类(tab容器可以relative定位,红线可以用一个absolute的div来做或者和csdn一样用after伪类,放到tab内,默认隐藏,tab聚焦后在设置显示出来),点击哪个tab就加上这个类,其他的tab移除这个类名。有帮助麻烦点个采纳【本回答右上角】,谢谢~~

    img

    DEMO

    
    <!DOCTYPE HTML>
    <style>
        ul.nav,ul.li{padding:0;margin:0}
        ul.nav{box-shadow:0 2px 4px 0 rgba(0,0,0,.05)}
        ul.nav li{display:inline-block;position:relative}
        ul.nav li a{line-height:40px;padding:0 20px;text-decoration:none}
        ul.nav li.active:after{position:absolute;left:0;bottom:0;width:100%;background:#fc5531;height:2px;content:''}
    </style>
    <ul class="nav">
        <li><a href="#">博客</a></li>
        <li><a href="#">专栏课程</a></li>
        <li><a href="#">下载</a></li>
        <li class="active"><a href="#">问答</a></li>
        <li><a href="#">社区</a></li>
    </ul>
    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $('.nav li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            return false
        })
    </script>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏

报告相同问题?

问题事件

  • 系统已结题 9月4日
  • 已采纳回答 8月27日
  • 创建了问题 8月27日

悬赏问题

  • ¥15 广告联盟的兜底广告是什么意思
  • ¥15 如何证明高斯噪声的包络公式
  • ¥150 寻找王者荣耀开发作者,合作或者解答
  • ¥15 乳腺癌数据集 相关矩阵 特征选择
  • ¥15 我的游戏账号被盗取,请问我该怎么做
  • ¥15 通关usb3.0.push文件,导致usb频繁断连
  • ¥15 有没有能解决微信公众号,只能实时拍照,没有选择相册上传功能,我不懂任何技术,,有没有给我发个软件就能搞定的方法
  • ¥15 Pythontxt文本可视化
  • ¥15 如何基于Ryu环境下使用scapy包进行数据包构造
  • ¥15 springboot国际化