沙漠-北极熊 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 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。