Jump to content

Recommended Posts

POR FAVOR ALGUEM ME AJUDA A ACHAR ERROS NO MEU CODIGO. O PROBLEMA NELE É QUE EU FIZ UM JS PRA FAZER O ESTILO BACKGROUND COLOR MUDAR NO FUNDO DOS CLASS==BLOCOS OU CADA UM POR ID(A,B,C,D,E,F,G,H,I)... SE ALGUEM PUDER RESPONDER EU AGRADEÇO..

 

 

 

<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title>APP FOE</title>

    <meta charset="utf-8">

    <style type="text/css">

        @import url('https://fonts.googleapis.com/css?family=Spectral+SC');

        body {

            background-image: url('https://i.pinimg.com/originals/76/36/5e/76365e38703aa2d2d9cfd3210ebb6d75.jpg');
            background-size: 100%

        }
        #bloco {

            width: 1000px;
            display: block;
            margin: 100px auto 0 auto;

        }
        .blocos {


            background-color: rgba(141, 80, 80,.875);
            border-radius: 4px;
            margin: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 300px;
            text-align: center;
            color: black;
            font-weight: 900;
            font-family: 'Spectral SC';
            font-size: 14px;


        }
        .linha {
            display: inline-block;
        }
        button {

            padding: 3px;
            margin: 3px 0 5px 0;
            background-color: rgba(0,0,0,.8);
            color: white;
            border: none;
            padding: 5px 12px;

        }
        h2{

            margin: 5px 0 0 0 ;

        }

    </style>

    <script type="text/javascript">
        var a , b , c , d , e , f , g , h , i;
        a = 0 ; b = 0 ; c = 0 ; d = 0 ; e = 0 ; f = 0 ; g = 0 ; h = 0 ; i = 0 ;
        
        function a () {
            if (a==0) {
                a=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                a=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function b () {
            if (b==0) {
                b=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                b=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function c () {
            if (c==0) {
                c=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                c=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function d () {
            if (d==0) {
                d=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                d=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function e () {
            if (e==0) {
                e=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                e=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function f () {
            if (f==0) {
                f=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                f=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function g () {
            if (g==0) {
                g=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                g=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function h () {
            if (h==0) {
                h=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                h=0;
                document.getElementById('').style.backgroundColor = 'rgba(141, 80, 80,.875)';
            }
        }
        function i () {
            if (i==0) {
                i=1;
                document.getElementById('').style.backgroundColor = 'rgba(81, 112, 78,.875)';
            } else {
                i=0;

            }
        }

    </script>
</head>
<body>

    <div id="bloco">
        
        <div class="linha">
            <div class="blocos" id="a"><h2>        ARVAHALL        </h2>    <button onclick="a()">CLICK!</button>    </div>
            <div class="blocos" id="b"><h2>        BRISGARD        </h2>    <button onclick="b()">CLICK!</button>    </div>
            <div class="blocos" id="c"><h2>        CIRGARD            </h2>    <button onclick="c()">CLICK!</button>    </div>
        </div>

        <div class="linha">
            <div class="blocos" id="d"><h2>        DINEGU            </h2>    <button onclick="d()">CLICK!</button>    </div>
            <div class="blocos" id="e"><h2>        EAST-NAGACH        </h2>    <button onclick="e()">CLICK!</button>    </div>
            <div class="blocos" id="f"><h2>        FEL DRANGHYR    </h2>    <button onclick="f()">CLICK!</button>    </div>
        </div>

        <div class="linha">
            <div class="blocos" id="g"><h2>        GREIFENTAL        </h2>    <button onclick="g()">CLICK!</button>    </div>
            <div class="blocos" id="h"><h2>        HOUNDSMOOR        </h2>    <button onclick="h()">CLICK!</button>    </div>
            <div class="blocos" id="i"><h2>        JAIMS            </h2>    <button onclick="i()" >CLICK!</button>    </div>
        </div>

    </div>

</body>
</html>

Share this post


Link to post
Share on other sites

Olá.

 

A biblioteca JQuery é excelente para se estudar.

Esse problema pode ser facilmente resolvido criando uma classe chamada "active", a quem será atribuído o background na cor secundária.

 

Ao clicar no botão, a div que o contém, cuja classe se chama "bloco", receberá uma nova classe, passando a ter duas classes, exemplo: <div class="blocos active" id="a">. Assim sendo, ao receber a classe "active", o elemento passa a receber os atributos CSS atribuídos à esta classe, que é uma nova cor de fundo.

 

O que o jQuery faz é chavear esta classe com a função toggleClass, atribuindo a classe "active" ao elemento quando não tiver, ou removendo a classe do elemento quando tiver.

 

Veja o exemplo funcional:

<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title>APP FOE</title>
    <meta charset="utf-8">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> 
 
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css?family=Spectral+SC');
        body {
            background-image: url('https://i.pinimg.com/originals/76/36/5e/76365e38703aa2d2d9cfd3210ebb6d75.jpg');
            background-size: 100%
        }
        #bloco {
            width: 1000px;
            display: block;
            margin: 100px auto 0 auto;
        }
        .blocos {

            background-color: rgba(141, 80, 80,.875);
            border-radius: 4px;
            margin: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 300px;
            text-align: center;
            color: black;
            font-weight: 900;
            font-family: 'Spectral SC';
            font-size: 14px;
        }
        .blocos.active{
            background-color: rgba(81, 112, 78,.875);
        }
        .linha {
            display: inline-block;
        }
        button {
            padding: 3px;
            margin: 3px 0 5px 0;
            background-color: rgba(0,0,0,.8);
            color: white;
            border: none;
            padding: 5px 12px;
            cursor: pointer;
        }
        h2{
            margin: 5px 0 0 0 ;
        }
    </style>

<script>
  $(document).ready(function(){
    $('.blocos button').click(function(){
      $(this).parent('.blocos').toggleClass('active')    
    })
  })
</script>

</head>
<body>
    <div id="bloco">
        
        <div class="linha">
            <div class="blocos" id="a"><h2>        ARVAHALL        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="b"><h2>        BRISGARD        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="c"><h2>        CIRGARD            </h2>    <button>CLICK!</button>    </div>
        </div>
        <div class="linha">
            <div class="blocos" id="d"><h2>        DINEGU            </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="e"><h2>        EAST-NAGACH        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="f"><h2>        FEL DRANGHYR    </h2>    <button>CLICK!</button>    </div>
        </div>
        <div class="linha">
            <div class="blocos" id="g"><h2>        GREIFENTAL        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="h"><h2>        HOUNDSMOOR        </h2>    <button>CLICK!</button>    </div>
            <div class="blocos" id="i"><h2>        JAIMS            </h2>    <button>CLICK!</button>    </div>
        </div>
    </div>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By manoaj
      Boa noite pessoal!
      Alguém ai entente dos checkouts do Mercado Pago pra me explicar como eu obtenho os dados da preferência criada através da url disponível na API
      https://api.mercadopago.com/checkout/preferences/:id?access_token=ACCESS_TOKEN_ENV  
    • By clickanapolis
      Boa tarde pessoal, desculpa se postei em lugar errado, mais não sei aonde postar essa minha dúvida. Estou finalizando um projeto que consiste em uma plataforma de processo seletivo e na etapa final os candidatos iram fazer uma prova online.
       
      O cliente me perguntou se é possível bloquear o navegador, tipo se ele sair do navegador ou mudar de aba tipo o sistema finalizar a prova do candidato, visto que o sistema irá identificar que ele foi fazer uma pesquisa.
       
      Eu particularmente não vi nada igual ate hj e não sei se existe algo seja em javascript ou qualquer outro modo de fazer isso.
    • By FilipeON
      Olá Sou iniciante em Javascript... Preciso de ajuda para a seguinte questão:
      Tenho duas FUNÇÕES e preciso executa-las de forma aleatória, já tentei de varias formas, mas sem sucesso, alguém pode me ajudar?
      Basicamente o que preciso é que toda vez que a pagina WEB for carregada uma das duas funções seja sorteada e executada.
       
      As funções são:
      function vt1(){fireEvent (document.getElementById('bt-1'), 'click');} function vt2(){fireEvent (document.getElementById('bt-2'), 'click');}
       
    • By Richard.Ribeiro
      Boa tarde a todos, Uma ajuda Por favor, alguém pode me explicar porque sempre que eu digito no" input name=vsat" e clico em buscar a DIV do " select id=rightValues" SOME
      alguem poderia ajudar? o erro está no  PHP ou JS
      desde já agradeço a atenção.
      <style media="screen">
      SELECT, INPUT[type="text"] {
        width:500px;
        box-sizing: border-box;
      }
      SELECT, INPUT[type="button"] {
        font-size: 20px;
      }
      SECTION {
        padding: 8px;
        background-color: #f0f0f0;
        overflow: auto;
      }
      SECTION > DIV {
        float: left;
        padding: 30px;
      }
      SECTION > DIV + DIV {
        width: 200px;
        text-align: center;
      }
      </style>
      <section class="container">
      <form  method="post">
        <?php
        if (isset($_POST['buscar'])) {
            $id_gmm = $_POST['gmm'];
          }elseif (isset($_POST['buscar2'])){
                $vsat = $_POST['vsat'];
            }
            ?>
      <h2><i class="fa fa-link"></i> Vincular Componentes a VSAT</h2>
      <h4><i class="fa fa-arrow-down"></i> Itens da GMM</h4>
          <div>
            <input type="text" name="gmm"  placeholder="Digite o N° da GMM">
            <input type="submit" name="buscar" value="buscar"><br>
              <select id="leftValues" size="5" multiple>
                <?php
                $consultaGmm = ConexaoBD::conectar()->prepare("SELECT tipo_material_id FROM itens_fornecidos WHERE gmm_id = $id_gmm ");
                $consultaGmm->execute();
                $consultaGmm = $consultaGmm->fetchAll();
                foreach ($consultaGmm as $key => $value) {
               ?>
              <option value="<?php echo  $value['tipo_material_id'];?>">
               <?php echo $value['tipo_material_id']; ?>
               </option>
            <?php }?>
            </select>
          </div>
          <div>
              <input type="button" id="btnLeft" value="&lt;&lt;" />
              <br>  <br>
              <input type="button" id="btnRight" value="&gt;&gt;" />
          </div>
          <div>
            <label for="">VSAT</label>
            <input type="text" name="vsat"  placeholder="Digite o ID/IDE da VSAT">
            <input type="submit" name="buscar2" value="buscar"><br>
              <select id="rightValues" size="4" multiple>
                <?php
                $consultaVsat = ConexaoBD::conectar()->prepare("SELECT estoque_material_id FROM componentes_instalados WHERE estoque_material_id = $vsat ");
                $consultaVsat->execute();
                $consultaVsat = $consultaVsat->fetchAll();
                foreach ($consultaVsat as $key => $valueVsat) {
               ?>
               <option value="<?php echo $valueVsat['estoque_material_id'];?>">
                 <?php echo $valueVsat['estoque_material_id']; ?>
               </option>
             <?php } ?>
              </select>
          </div>
      </form>
      </section>
      <script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
      <script src="<?php echo INCLUDE_PATH_PAINEL ?>js/main.js"></script>
      <script type="text/javascript">
      $("#btnLeft").click(function () {
          var selectedItem = $("#rightValues option:selected");
          $("#leftValues").append(selectedItem);
      });
      $("#btnRight").click(function () {
          var selectedItem = $("#leftValues option:selected");
          $("#rightValues").append(selectedItem);
      });
       
      </script>
      <?php die(); ?>
       
       
    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.