How to click a button and activate an "active" php class

Asked

Viewed 388 times

0

Hello I am beginner in programming, I would like to know how I can disable and activate a class "Active" from php by clicking the buttons. 

.container {
  width: 100%;
}

.step-pog-bar {
  margin-top: 20%;
  counter-reset: step;
}

.step-pog-bar li {
  list-style: none;
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
}

.step-pog-bar li::before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #ddd;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #fff;
}

.step-pog-bar li::after {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  border: 2px solid #ddd;
  width: 100%;
  z-index: -1;
}

.step-pog-bar li:first-child::after {
  content: none;
}

.step-pog-bar li.active {
  color: chartreuse;
}

.step-pog-bar li.active::before {
  border-color: chartreuse;
}

.step-pog-bar li.active+li::after {
  border-color: chartreuse;
}

.btn {
  margin-top: 100px;
  position: absolute;
  margin-left: 20%;
}

.btn_D {
  margin-top: 100px;
  position: absolute;
  margin-left: 10%;
}
<div class="btn">
  <input type="submit" value="ativar">
</div>
<div class="btn_D">
  <input type="submit" value="Desativar">
</div>
<div class="container">
  <ul class="step-pog-bar">
    <li class="active">Canal Dentario</li>
    <li class="active">Limpeza</li>
    <li class="active">Clareamento</li>
    <li class="active">Escovação</li>
    <li>Conclusão</li>

  </ul>
</div>

php html css
  • 2

    What is the result you want to achieve? You know the difference between server-side, where PHP runs, and client-side?

  • The situation is as follows, I have a progress bar with 5 steps, each step is activated when I complete a class "li" with "active", so I made 2 buttons, one to enable and the other to disable when it was selected, so I did some searches, but unsuccessfully, as I am starting in web programming I do not understand much, so I thank help. Yes I know the difference.

1 answer

0

Friend from what I understand you want the active elements according to the steps in progress, I made a code where the Wizard is set according to the user’s click, when you choose the step, it arrow the previous steps as active and the following ones remain inactive and vice versa, but I need to know if this is going to be dynamic or if every step of this is going to be a Ubmit to another page, because if there is a page reload or targeting you can do this in PHP otherwise setting some variables to indicate which should be active or not, but dynamically in PHP there is no way.

  var lList = 0;
    $(document).ready(function(){
      $(".step-pog-bar li").each(function(){
        lList++;
      });
      $(".step-pog-bar li").on("click",function(ind){
        $(".step-pog-bar li").removeClass("active");
        for (var i = 0; i <= $(this).index(); i++) {
          $(".step-pog-bar li").eq(i).addClass("active");
        }
      })
    })
    .container {
width: 100%;
}

.step-pog-bar {
margin-top: 20%;
counter-reset: step;
}

.step-pog-bar li {
list-style: none;
float: left;
width: 20%;
position: relative;
text-align: center;
}
.step-pog-bar li:hover {
cursor:pointer;
}
.step-pog-bar li::before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: #fff;
}

.step-pog-bar li::after {
content: '';
position: absolute;
top: 15px;
left: -50%;
border: 2px solid #ddd;
width: 100%;
z-index: -1;
}

.step-pog-bar li:first-child::after {
content: none;
}

.step-pog-bar li.active {
color: chartreuse;
}

.step-pog-bar li.active::before {
border-color: chartreuse;
}

.step-pog-bar li.active+li::after {
border-color: chartreuse;
}

.btn {
margin-top: 100px;
position: absolute;
margin-left: 20%;
}

.btn_D {
margin-top: 100px;
position: absolute;
margin-left: 10%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">
  <input type="submit" value="ativar">
</div>
<div class="btn_D">
  <input type="submit" value="Desativar">
</div>
<div class="container">
  <ul class="step-pog-bar">
    <li class="active">Canal Dentario</li>
    <li class="active">Limpeza</li>
    <li class="active">Clareamento</li>
    <li class="active">Escovação</li>
    <li>Conclusão</li>

  </ul>
</div>

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.