热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

进度栏带有步骤和箭头(如果还有更多步骤被隐藏)

我试图制作一个进度条,如果还有更多内容仍被隐藏,则显示箭头。为了更清楚,我做

我试图制作一个进度条,如果还有更多内容仍被隐藏,则显示箭头。为了更清楚,我做了这些:
之前:

进度栏带有步骤和箭头(如果还有更多步骤被隐藏)

之后:

进度栏带有步骤和箭头(如果还有更多步骤被隐藏)

所以我想在后面的图片中添加箭头,如果我在内容的结尾,我希望它再次隐藏。

我的问题是:我从哪里开始?

我有进度条:




@foreach($survey['data']['formCategories'] as $key => $category)
id="A{{$category['id']}}">
{{$key + 1}}



@endforeach




但是除此之外,我不知道从哪里开始

@Dan给出的答案很接近,但我要在内容上放置箭头,而不是编辑或添加内容。


在您编辑问题之前,我已经这样做过,但是如果您想沿着仅CSS的路线,因为您的标签所暗示的(您不应该,应该有更多的运气来适当地更改foreach循环),那么您可以隐藏第5个元素之后的所有内容,并将第6个元素转换为箭头显示以前隐藏的最后一个元素。

这支笔很草率,但希望它能使您了解如何使用伪选择器。


ul.progressblobs {
display: table;
}
ul.progressblobs > li {
display: table-cell;
border: 3px solid black;
border-radius: 50%;
width: 3em;
height: 3em;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
ul.progressblobs > li.arrow,ul.progressblobs > li:nth-child(n+6) {
display: none;
}
ul.progressblobs > li:nth-child(n+6) ~ li.arrow {
display: table-cell;
}


  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7




编辑:我已经看到您对不想编辑内容的评论。问题是,添加内容的唯一真实方法就是更改我之前发布的第六个元素。这是因为您不能在CSS中“后退”。您可以说“改变第五个元素”,但不能说“但只有在第六个元素存在的情况下才能这样做”。然后,在第六个元素上使用伪选择器将意味着其上的任何链接也将成为箭头的链接。


推荐阅读
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文详细介绍了如何构建一个高效的UI管理系统,集中处理UI页面的打开、关闭、层级管理和页面跳转等问题。通过UIManager统一管理外部切换逻辑,实现功能逻辑分散化和代码复用,支持多人协作开发。 ... [详细]
  • Scala 实现 UTF-8 编码属性文件读取与克隆
    本文介绍如何使用 Scala 以 UTF-8 编码方式读取属性文件,并实现属性文件的克隆功能。通过这种方式,可以确保配置文件在多线程环境下的一致性和高效性。 ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 深入解析ESFramework中的AgileTcp组件
    本文详细介绍了ESFramework框架中AgileTcp组件的设计与实现。AgileTcp是ESFramework提供的ITcp接口的高效实现,旨在优化TCP通信的性能和结构清晰度。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 本文探讨了如何优化和正确配置Kafka Streams应用程序以确保准确的状态存储查询。通过调整配置参数和代码逻辑,可以有效解决数据不一致的问题。 ... [详细]
  • 本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ... [详细]
author-avatar
女人放聪明点碧
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有