Como criar botões e mudar a cor dos botões com o jquery

natanojj · 18 de maio de 2016

1 - Criar 3 botões;

2 - utilizando jQuery mudar a cor dos botões na inicialização da página de forma que o botão 1 deve ser vermelho, o botão 2 deve ser azul e o botão 3 deve ser verde.

3 - ao clicar no botão 1, os botões 2 e 3 devem ficar na cor roxa;

4 - ao clicar no botão 2, os botões 1 e 3 devem ficar na cor amarela;

5 - ao clicar no botão 3, os botões 1 e 2 devem ficar na cor cinza;

criar um quarto botão que ao ser clicado, retorna os botões 1,2,3 para as cores do passo 2.

DiF · 18 de maio de 2016

Prezado,

Seja bem-vindo ao Fórum do Clube do Hardware; obrigado por sua participação!

Quanto à sua dúvida, para podermos lhe ajudar, nós precisamos de mais alguns detalhes, tais como:

parte do código que já foi feito;
caso não tenha um código feito, qual o algoritmo que você pretende usar para resolver o problema;
você tem experiência com esta linguagem de programação?

Por favor, não leve para o lado pessoal, mas o nosso objetivo principal aqui é ajudar você a resolver o problema, se simplesmente postássemos um código já pronto, você nunca aprenderia de fato...

Atenciosamente,

Equipe Clube do Hardware

natanojj · 18 de maio de 2016

tenho com o C e C#.

a linguagem para desenvolver é o javascript, estou aprendendo ela e não tenho o código.

desde já agradeço

DiF · 18 de maio de 2016

@natanojj

Podemos ajudar você, mas antes você precisa tentar fazer seu exercício e postar aqui um código de tentativa.

O tal exercício é de nível iniciante, acredito que com algumas horas de estudo você entenderá como manipular o elemento com jQuery.

O que posso fazer por você no momento é dar um norte.

Pesquise sobre a função css()

e como iniciar o jQuery usando a função ready()

Depois que postar uma tentativa(mesmo que esteja errada) aí sim, podemos te dar um código ou simplesmente corrigir o seu explicando os erros!

natanojj · 18 de maio de 2016

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
  <h1>Jonatan</h1>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">   
    <title>Jonatan</title>
  
 <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>   
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript"> 
    
        $(function () {
            $( "#barra" ).buttonset();
        });
        $("#botao2").click(function () {
            $("botao2").css('color', '# ff1a1a');

        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
   
           
     <div id="barra">
         <div id="botao1">
        <button>botao1</button>
    </div>
       
        <div id="botao2">
        <button>botao2</button>
    </div>
        <div id="botao3">
         <button>botao3</button>
    </div>
       
       
        

    </div> 
    </form>
</body>
</html>