我尝试为表单创建一个逐步进度栏,但是我想让进度栏的圆点上方每隔一个第二个“文本框”,以使元素文本在彼此之间不会互相干扰浏览器窗口变小.
有没有简单的方法可以做到这一点？
片段显示了运行中的进度栏.
var progressbar = { bar : $('#progress-bar'),reset : function(){ if (this.bar){ // this.bar.find('li').addClass('active'); } },Next: function(){ $('#progress-bar li:not(.active):first').addClass('active'); },Back: function(){ $('#progress-bar li.active:last').removeClass('active'); }}progressbar.reset();////$("#Next").on('click',function(){ progressbar.Next();})$("#Back").on('click',function(){ progressbar.Back();})$("#reset").on('click',function(){ progressbar.reset();}) .progressbar { margin: 50px 0 50px 0; counter-reset: step; } .progressbar li { wIDth: 12.5%; List-style-type: none; float: left; Font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #555555; } .progressbar li:before { wIDth: 15px; height: 15px; content: ''; line-height: 30px; border: 2px solID #555555; background-color: #555555; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; Transition: all .8s; } .progressbar li:after { wIDth: 100%; height: 2px; content: ''; position: absolute; background-color: #555555; top: 7px; left: -50%; z-index: -1; Transition: all .8s; } .progressbar li:first-child:after { content: none; } .progressbar li.active:before { border-color: #55b776; background-color: #55b776; Transition: all .8s; } .progressbar li.active:after { background-color: #55b776; Transition: all .8s; }.btn { background-color: #55b776; margin: 5px; wIDth: 75px; color: white;}.btn:hover { color: white;}.btn:focus { color: white;}.btn-container { display: flex; justify-content: center; wIDth: 100%; position: absolute; bottom: 0;}body { background-color: #f7f7f7;}<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><!DOCTYPE HTML><HTML lang="en" ><head> <Meta charset="UTF-8"> <Title>Simple Step Progress bar</Title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/AJAX/libs/twitter-bootstrap/4.0.0-Alpha.6/CSS/bootstrap.min.CSS'> <link rel="stylesheet" href="CSS/style.CSS"> </head><body><ul ID="progress-bar" > <li>Art</li> <li>daten</li> <li>zeit</li> <li>ort</li> <li>pdf</li> <li>Bilder</li> <li>INFO</li> <li>Bezahlen</li></ul><div > <button ID="Next">Next</button> <button ID="Back">Back</button> <button ID="reset">reset</button></div> <script src='https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.1.1/jquery.min.Js'></script><script src='https://cdnjs.cloudflare.com/AJAX/libs/twitter-bootstrap/4.0.0-Alpha.6/Js/bootstrap.min.Js'></script> <script src="Js/index.Js"></script></body></HTML>查看代码段：
var progressbar = { bar: $('#progress-bar'),reset: function() { if (this.bar) { // this.bar.find('li').addClass('active'); } },Next: function() { $('#progress-bar li:not(.active):first').addClass('active'); },Back: function() { $('#progress-bar li.active:last').removeClass('active'); }}progressbar.reset();////$("#Next").on('click',function() { progressbar.Next();})$("#Back").on('click',function() { progressbar.Back();})$("#reset").on('click',function() { progressbar.reset();}).progressbar { margin: 50px 0 50px 0; counter-reset: step;}.progressbar li { wIDth: 12.5%; List-style-type: none; float: left; Font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #555555;}.progressbar li:before { position: relative; wIDth: 15px; height: 15px; content: ''; line-height: 30px; border: 2px solID #555555; background-color: #555555; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; Transition: all .8s;}.progressbar li:after { wIDth: 100%; height: 2px; content: ''; position: absolute; background-color: #555555; top: 7px; left: -50%; z-index: -1; Transition: all .8s;}.progressbar li:first-child:after { content: none;}.progressbar li.active:before { border-color: #55b776; background-color: #55b776; Transition: all .8s;}.progressbar li.active:after { background-color: #55b776; Transition: all .8s;}.btn { background-color: #55b776; margin: 5px; wIDth: 75px; color: white;}.btn:hover { color: white;}.btn:focus { color: white;}.btn-container { display: flex; justify-content: center; wIDth: 100%; position: absolute; bottom: 0;}body { background-color: #f7f7f7;}.progressbar li:nth-child(2n) { top: -50px;}.progressbar li:nth-child(2n):before { top: 50px;}.progressbar li:nth-child(2n):after { top: 57px;}<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script><!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Simple Step Progress bar</Title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/AJAX/libs/twitter-bootstrap/4.0.0-Alpha.6/CSS/bootstrap.min.CSS'> <link rel="stylesheet" href="CSS/style.CSS"></head><body> <ul ID="progress-bar" > <li>Art</li> <li>daten</li> <li>zeit</li> <li>ort</li> <li>pdf</li> <li>Bilder</li> <li>INFO</li> <li>Bezahlen</li> </ul> <div > <button ID="Next">Next</button> <button ID="Back">Back</button> <button ID="reset">reset</button> </div> <script src='https://cdnjs.cloudflare.com/AJAX/libs/jquery/3.1.1/jquery.min.Js'></script> <script src='https://cdnjs.cloudflare.com/AJAX/libs/twitter-bootstrap/4.0.0-Alpha.6/Js/bootstrap.min.Js'></script> <script src="Js/index.Js"></script></body></HTML>以下CSS规则可以解决问题：
.progressbar li:nth-child(2n) { top: -50px;}.progressbar li:nth-child(2n):after { top: 57px;}.progressbar li:nth-child(2n):before { top: 50px;}以上是内存溢出为你收集整理的javascript-在不同的CSS样式属性中给第二个元素 全部内容，希望文章能够帮你解决javascript-在不同的CSS样式属性中给第二个元素 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）