404

D7net
:/ var / www / html / crsys /
Filename : teste_abas.php
back
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Teste de Abas</title>
  <style>
    .tab-button {
      padding: 10px;
      margin-right: 5px;
      cursor: pointer;
      border: none;
      background-color: #eee;
    }

    .tab-button.active {
      background-color: #007bff;
      color: white;
    }

    .tab-panel {
      display: none;
      padding: 10px;
      border: 1px solid #ccc;
      margin-top: 10px;
    }

    .tab-panel.active {
      display: block;
    }

    .container-custom {
      padding: 20px;
    }
  </style>
</head>
<body>

<form id="form_orcamento" method="POST" action="" enctype="multipart/form-data"> 
  <div class="col-custom" style="width: 25%;">
    <div class="container-custom">
      
      <div class="tabs">
        <button type="button" class="tab-button active" data-index="0">Negociação</button>
        <button type="button" class="tab-button" data-index="1">Aba 2</button>
        <button type="button" class="tab-button" data-index="2">Aba 3</button>
      </div>

      <div class="tab-content">
        <div class="tab-panel active">
          <label for="vlr_negocia">Total</label>
          <input name="vlr_negocia" type="text" id="vlr_negocia">
        </div>
        
        <div class="tab-panel">
          <label for="vlr_amb">Vlr Ambiente</label>
          <input name="vlr_amb" type="text" id="vlr_amb">
        </div>

        <div class="tab-panel">
          Conteúdo da Aba 3
        </div>
      </div>

    </div>
  </div>
</form>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.tab-button');
    const panels = document.querySelectorAll('.tab-panel');

    buttons.forEach((btn, index) => {
      btn.addEventListener('click', function (event) {
        event.preventDefault(); // Impede comportamento padrão do botão

        console.log("Aba clicada:", index);

        buttons.forEach(b => b.classList.remove('active'));
        panels.forEach(p => p.classList.remove('active'));

        btn.classList.add('active');
        panels[index].classList.add('active');
      });
    });
  });
</script>

</body>
</html>