-1

Ola sou iniciante em programação, gostaria de saber como posso desativar e ativar uma class "Active" a partir do php, clicando nos botões.

.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>

2
  • 2
    Qual é o resultado que você pretende atingir? Sabe qual a diferença entre server-side, onde é executado o PHP, e client-side?
    – Woss
    16/05/2019 às 18:12
  • A situação é a seguinte, eu tenho uma barra de progresso com 5 etapas, cada etapa é ativada quando eu completo uma classe "li" com o "active", então eu fiz 2 botões, um para ativar e outro para desativar quando fosse selecionado, então fiz algumas pesquisas, mas sem sucesso, como estou iniciando em programação web não entendo muito, então agradeço ajuda. Sim sei a diferença.
    – Astolpho
    16/05/2019 às 19:53

1 Resposta 1

-1

Amigo pelo que entendi você quer os elementos ativos de acordo com as etapas no progresso, fiz um código onde o wizard é setado de acordo com o clique do usuário, quando você escolher a etapa, ele seta as etapas anteriores como ativa e as seguintes permanecem inativas e vice versa, mas preciso saber se isso vai ser de forma dinâmica ou se cada etapa dessas será um submit para outra página, pois se houver um recarregando da página ou direcionamento você consegue fazer isso em PHP de outra maneira setando algumas variáveis para indicar qual deve ficar ativo ou não, mas de forma dinâmica em PHP não há como.

  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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .