热门标签 | 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中“后退”。您可以说“改变第五个元素”,但不能说“但只有在第六个元素存在的情况下才能这样做”。然后,在第六个元素上使用伪选择器将意味着其上的任何链接也将成为箭头的链接。


推荐阅读
  • 深入解析ESFramework中的AgileTcp组件
    本文详细介绍了ESFramework框架中AgileTcp组件的设计与实现。AgileTcp是ESFramework提供的ITcp接口的高效实现,旨在优化TCP通信的性能和结构清晰度。 ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 探讨在特定情况下使用 Knockout.js 的 if 或 visible 绑定的最佳实践,特别是在处理未定义对象时的策略。 ... [详细]
  • 本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例,深入解析了游戏逻辑、动画效果及用户交互的实现过程,为开发者提供了宝贵的参考和实践经验。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 图数据库中的知识表示与推理机制
    本文探讨了图数据库及其技术生态系统在知识表示和推理问题上的应用。通过理解图数据结构,尤其是属性图的特性,可以为复杂的数据关系提供高效且优雅的解决方案。我们将详细介绍属性图的基本概念、对象建模、概念建模以及自动推理的过程,并结合实际代码示例进行说明。 ... [详细]
  • 作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • 开发笔记:Python:GUI之tkinter学习笔记1控件的介绍及使用
    开发笔记:Python:GUI之tkinter学习笔记1控件的介绍及使用 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用,本文提供了实用的代码示例和最佳实践,帮助开发者解决跨域请求中的常见问题。 ... [详细]
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
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社区 版权所有