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


推荐阅读
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社区 版权所有