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 fabioamorais
      Ola pessoal, sou novo aqui no fórum e também no mundo da programação. 

      Estou criando um sistema de cadastro de clientes em PHP 7 e mysql
      para meu serviço para fins de organização, tenho ja pronto o sistema de cadastro e edição do cliente, tenho login por usuário e senha.
      preciso colocar nesse sistema uma forma que registre a ação e o usuário que fez a ação quando houver uma alteração no cadastro.
      exemplo;
      O usuario (jose) alterou o status de analise para concluído .
      o usuario (pedro) alterou a localização de mesa para armario.
      e que fosse exibido como um tipo de histórico de eventos no próprio cadastro do cliente.
      e nesse campo se ainda tiver como add cometários.
      Usuario (jose): Precisa entrar em contato com o cliente francisco. 
      Usuario (pedro): cliente foi avisado e está sabendo.
       
      quem souber uma forma de fazer isso, ficaria muito grato.

    • By lamorim1904
      Caros, boa tarde!
       
      Primeiramente me desculpem se estou abrindo tópico repetido ou de maneira errada, procurei aqui no fórum mas talvez a forma que estou procurando ou a minha falta de conhecimento sobre a área não está me permitindo encontrar a solução.
      Não entendo quase NADA de programação e estou realizando um projeto que me cobra um pouco neste sentido, vou tentar explicar:
       
      Estou criando um hotspot inteligente onde o próprio cliente se cadastra, ele preenche um formulário e posterior a isso eu libero a conexão dele.
      O meu problema está depois que ele cria o seu cadastro, as informações vão para meu banco de dados mas nao retornam ao cliente, portanto a conexão não é liberada.
       
      Eu encontrei uma solução mas não estou conseguindo usa-la da maneira que gostaria, após usuário se cadastrar, eu direciono ele para a pagina de login e senha e caso ele digite os dados que ele acabou de preencher, a conexão é liberada. 
       
      Eu gostaria de automatizar esse processo, identificar a variavel X que eu usei para escrever no meu banco de dados e inseri-la no campo de usuario e senha e se possivel submeter a informação para o usuario nem ver essa tela de login e senha. Sabem me dizer se tem como?
       
      Para ficar mais claro, vou postar os codigos;
       
      <NESTE PONTO O CLIENTE JA PREENCHEU O CADASTRO E EU USO AS VARIAVEIS PARA ESCREVER NO MEU BANCO DE DADOS>
      <EU GOSTARIA DE USAR A VARIAVEL $MOBILE COMO USUARIO E SENHA NA PARTE DE JAVA ABAIXO>

      $sql = "INSERT INTO radcheck (UserName, Attribute, op, Value) VALUES ";
      $sql .= "('$MOBILE', 'Cleartext-Password', ':=', '$MOBILE')";
      mysqli_query($strcon,$sql) or die("Erro ao tentar cadastrar registro");

      $sql = "INSERT INTO radreply (UserName, Attribute, op, Value) VALUES ";
      $sql .= "('$MOBILE', 'Mikrotik-Rate-Limit', ':=', '512k/1024k')";
      mysqli_query($strcon,$sql) or die("Erro ao tentar cadastrar registro");
      mysqli_close($strcon);
      echo "Cliente cadastrado com sucesso!";
      ?>
      <html>
      <head><title>...</title></head>
      <body>
      $(if chap-id)
      <noscript>
      <center><b>JavaScript required. Enable JavaScript to continue.</b></center>
      </noscript>
      $(endif)
      <center>If you are not redirected in a few seconds, click 'continue' below<br>
      <form name="redirect" action="http://201.82.110.3/mkloginteste2.php" method="post">
      <input type="hidden" name="mac" value="$(mac)">
      <input type="hidden" name="ip" value="$(ip)">
      <input type="hidden" name="username" value="$MOBILE">
      <input type="hidden" name="link-login" value="$(link-login)">
      <input type="hidden" name="link-orig" value="$(link-orig)">
      <input type="hidden" name="error" value="$(error)">
      <input type="hidden" name="chap-id" value="$(chap-id)">
      <input type="hidden" name="chap-challenge" value="$(chap-challenge)">
      <input type="hidden" name="link-login-only" value="$(link-login-only)">
      <input type="hidden" name="link-orig-esc" value="$(link-orig-esc)">
      <input type="hidden" name="mac-esc" value="$(mac-esc)">
      <input type="submit" value="continue">
      </form>
      <script language="JavaScript">
      <!--
         document.redirect.submit();
      //-->
      </script></center>
      </body>
      </html>
    • By Thiago Az
      Pessoal bom dia a todos.
       
      Gostaria de uma ajuda de vocês tem um array JavaScript onde tenho os valores das cidades repetidos preciso agrupar os usuários da mesma cidade e eliminar as cidades repetidas
       
      Exemplo do meu código:
       
      var pessoas = [ { nome: 'Maria', cidade: 'São Paulo' }, { nome: 'João', cidade: 'São Paulo' }, { nome: 'Alberto', cidade: 'Rio' }, { nome: 'Matheus', cidade: 'Curitiba' }, { nome: 'kalebe', cidade: 'Belo Horizonte' }, { nome: 'Isaac', cidade: 'Rio' }, { nome: 'Batista', cidade: 'Curitiba' }, { nome: 'Carmem', cidade: 'Rio' }, ];  
      Quero que o retorno seja assim:
       
      São Paulo
      Maria
      João
       
      Rio
      Alberto
      Isaac
      Carmen
       
      Sem que eu tenha Rio ou outra cidade se repetindo várias vezes. Alguém tem alguma sugestão?
       
      Desde já agradeço a todos.
      Grato.
    • By DinhoPHP
      Olá!
      Alguém pode me dar uma luz sobre fazer um ORDER BY, hora ASC ou hora DESC? Por favor! Estou utilizando PHP e JS no projeto.
       
      $pegadados = $pdo->prepare("SELECT * FROM produtos WHERE categoria LIKE '%$dataSearch%' OR marca LIKE '%$dataSearch%' OR produto LIKE '%$dataSearch%' OR modelo LIKE '%$dataSearch%' OR descricao LIKE '%$dataSearch%' ORDER BY $filter $filter2");
    • By DinhoPHP
      Olá!
      Alguém pode me dar uma luz sobre fazer um ORDER BY, hora ASC ou hora DESC? Por favor! Estou utilizando PHP e JS no projeto.
       
      $pegadados = $pdo->prepare("SELECT * FROM produtos WHERE categoria LIKE '%$dataSearch%' OR marca LIKE '%$dataSearch%' OR produto LIKE '%$dataSearch%' OR modelo LIKE '%$dataSearch%' OR descricao LIKE '%$dataSearch%' ORDER BY $filter $filter2");
×

Important Information

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