Блог

Главная - Вопросы по программированию - Дайте каждому второму элементу в разные атрибуты в стиле css

Дайте каждому второму элементу в разные атрибуты в стиле css

#javascript #jquery #html #css

#javascript #jquery #HTML #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>

Комментарии:

1. Google css odd and even и это должно направить вас в правильном направлении — это еще не все, но это хорошее начало — посмотрите здесь w3.org/Style/Examples/007/evenodd.en.html

Ответ №1:

Вам нужно использовать .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;
}

Комментарии:

1. Ник, у меня последний вопрос. Можете ли вы сказать мне, как я установил, скажем, первые 4 элемента «активными» с помощью javascript?