javascript - 为 <li> 中的每个第二个元素提供不同的 css 样式属性

我尝试为一个表单做一个步骤进度条，但我想在进度条的点上方每隔一个“文本字段”，这样元素的文本就不会妨碍每个其他当浏览器窗口变小时。

有没有简单的方法可以做到这一点？

截图显示了正在运行的进度条。

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>

最佳答案

您需要使用 .progressbar li:nth-child(2n) 定位每个其他 li 元素，然后您需要将整个伪元素向上移动，然后移动直线和圆圈(:before 和 :after)后退。如果您没有将文本、线条和圆圈都附加到同一元素/伪元素，这将很多容易。

查看代码片段:

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 - 为 <li> 中的每个第二个元素提供不同的 css 样式属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55657038/

javascript - 为 <li> 中的每个第二个元素提供不同的 css 样式属性

上一篇：html - 是否可以使用纯 CSS 更改滚动上的此 div 颜色？

下一篇：html - 将按钮固定到 flexbox 列布局的底部，margin-top :auto not working