Bonjour à toutes et tous,
après de nombreuses recherches infructueuses, j'en viens à demander de l'aide à la communauté, pour un problème qui semble simple, mais qui me casse la tête !
Donc, de manière basique, j'ai un menu avec des items sous forme de liste <ul> et j'aimerais qu'au clic de l'internaute, mes items <li> changent de couleurs de fond.
Pour mieux me faire comprendre, je laisse ici le bout de code sur lequel je planche en ce moment. Si quelqu'un connait une solution à mon problème, un grand merci d'avance !
Mon javascript :
Mon CSS :
Et mon html :
après de nombreuses recherches infructueuses, j'en viens à demander de l'aide à la communauté, pour un problème qui semble simple, mais qui me casse la tête !
Donc, de manière basique, j'ai un menu avec des items sous forme de liste <ul> et j'aimerais qu'au clic de l'internaute, mes items <li> changent de couleurs de fond.
Pour mieux me faire comprendre, je laisse ici le bout de code sur lequel je planche en ce moment. Si quelqu'un connait une solution à mon problème, un grand merci d'avance !
Mon javascript :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#reglement-bouton").css({
backgroundColor:"#2e2e2e"
});
$("#menu li.bouton").click(function(){
$clicked = $(this);
// le bouton n'est pas encore "transformé" ni n'ont plus animé
if ($clicked.css("backgroundColor") != "#be2830" && $clicked.is(":not(animated)")) {
$clicked.animate({
backgroundColor:"#be2830"
}, 600 );
// chaque bouton doit avoir un id de type "xx-bouton" et la cible un id de type "xx"
var idToLoad = $clicked.attr("id").split('-');
// on cherche dans le contenu la div visible à laquelle on applique un fadeOut
$("#contenu").find("div:visible").fadeOut("fast", function(){
// une fois le fadeOut accompli, on fait un fadeIn à la div active
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
// on remet les autres boutons au style par défaut
$clicked.siblings(".bouton").animate({
backgroundColor:"#2e2e2e"
}, 600 );
});
});
</script>
Mon CSS :
<style type="text/css">
body {
background-color: #FFF;
}
#menu {
width:150px;
margin: 20px 0;
color:#fff;
}
.bouton {
width:150px;
margin-bottom:8px;
padding:8px;
}
.bouton li {
font-size:16px;
text-transform:uppercase;
}
#activite-bouton {
background:#be2830;
}
#reglement-bouton {
background:#2e2e2e;
}
#contenu {
width:500px;
height:100px;
}
</style>
Et mon html :
<h1>changement des couleurs des div</h1>
<div id="menu">
<ul>
<li id="activite-bouton" class="bouton">activité</li>
<li id="reglement-bouton" class="bouton">règlement</li>
</ul>
</div>
<div id="contenu">
<div id="activite">
<h2>Mes activités</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim porta. Sed porta, mauris non interdum mollis, sem ligula fringilla erat, id aliquet felis lectus at arcu. Aenean auctor viverra facilisis. Aenean sit amet ligula ut arcu accumsan vulputate. Aliquam gravida tellus eget lectus condimentum convallis. Mauris viverra ut diam at convallis. Sed felis dui, laoreet vel lorem eget, rutrum tempor eros.</p>
</div>
<div id="reglement">
<h2>Mon règlement</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim porta. Sed porta, mauris non interdum mollis, sem ligula fringilla erat, id aliquet felis lectus at arcu. Aenean auctor viverra facilisis. Aenean sit amet ligula ut arcu accumsan vulputate. Aliquam gravida tellus eget lectus condimentum convallis. Mauris viverra ut diam at convallis. Sed felis dui, laoreet vel lorem eget, rutrum tempor eros.</p>
</div>
</div>
