給出每一個元素 <li> 不同的CSS風格屬性
[英]Give every second element in a <li> different css-style attributes
問題描述
我嘗試為表單執行一個步驟進度條，但我希望在進度條的點上方每隔一個“textfield”，以便元素的文本不會妨礙彼此的方式瀏覽器窗口變小了。
有一個簡單的方法嗎？
剪輯顯示了進度條的實際效果。
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" class="progressbar"> <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 class="btn-container"> <button class="btn" id="Next">Next</button> <button class="btn" id="Back">Back</button> <button class="btn" 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>
1 個解決方案
解決方案1
2 已采納 2019-04-12 17:56:37
你需要使用.progressbar li:nth-child(2n)來定位所有其他li元素，然后你需要向上移動整個偽元素，然后將線和圓（ :before and :after ）向下移動。 如果你沒有足夠的文字，線條和圓圈所有連接到相同的元素/ pseudoelement這將是一個容易得多 。
查看代碼段：
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" class="progressbar"> <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 class="btn-container"> <button class="btn" id="Next">Next</button> <button class="btn" id="Back">Back</button> <button class="btn" 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樣式顏色值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.