JQuery - page changement de couleur de fond, cliquez sur le bouton
Je suis très nouveau pour jquery et suis en train de changer le fond de page de couleur une fois qu'un bouton est cliqué.
J'ai cherché et il y a pas mal de questions sur des choses similaires, mais je suis à la recherche d'une réponse sur une page d'arrière-plan de changement de couleur en particulier.
J'apprécierais toute aide, merci, Freddie
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<section class="text">
CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>
</body>
</html>
CSS:
body {
height: ;
background: #D8D8D8;
}
.text {
color: #686868;
font-family: arial;
font-size: 2em;
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
}
#btn {
margin-left: 550px;
width: 200px;
height: 100px;
font-size: 2em;
border-radius: 10px;
background: #ffffff;
}
#btn:hover {
background: #ff0000;
color: #ffffff;
}
JS:
$(button).click(function() {
$(this).css('background', '#ff0000');
)};
changement
$(button)
à $('#btn')
et envelopper le tout dans un $(document).ready(function() { });
et vous devriez être bon d'aller!
OriginalL'auteur Freddie | 2014-02-10
Vous devez vous connecter pour publier un commentaire.
Ici vous avez un exemple.
OriginalL'auteur mbecares
Ce:
:
J'ai des erreurs lors de la vérification de la page dans la console. Vous vous demandez si j'ai utilisé le bon bibliothèque jquery?
A finalement obtenu ce travail, merci à vous tous pour votre aide! Beaucoup apprécié!!
OriginalL'auteur zgood
D'essayer de changer le
//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
àhttp://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
si vous testez le site en local.Si vous utilisez
//
, il utilise le protocole que vous acessing la page avec (file://
dans le cas de locaux testng).Avez-vous utiliser le jquery, le code de @zgood?
Oh, il a fait une petite erreur. Remplacer la première )};});
De se! J'ai été en utilisant zgood du code, mais maintenant travailler avec ce dernier changement!
Heureux d'entendre cela fonctionne 🙂
OriginalL'auteur Daniel Peukert