JavaScript, retour du style CSS
Résolu
belgikoi
Messages postés
44
Date d'inscription
Statut
Membre
Dernière intervention
-
belgikoi Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
belgikoi Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- JavaScript, retour du style CSS
- Style word - Guide
- Nom pour facebook stylé - Guide
- Style d'écriture a copier coller - Guide
- Retour à la ligne excel formule - Guide
- Telecharger javascript - Télécharger - Langages
4 réponses
Salut,
Je t'ai fait un exemple avec JQuery:
Le principe est simple: J'ai défini une classe "active" dont la couleur de texte est rouge.
Lorsqu'on clique sur un lien, JQuery le détecte ($('a').click(function(){) et supprime toutes les classes "active" potentiellement présentes sur d'autres liens de la page ( $('ul li a').removeClass('active');) avant d'affecter cette classe au "a" cliqué $(this).addClass('active');..
J'espère avoir pu t'aider !
++
Je t'ai fait un exemple avec JQuery:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$('ul li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
a{
text-decoration:none;
color:green;
}
.active{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</body>
</html>
Le principe est simple: J'ai défini une classe "active" dont la couleur de texte est rouge.
Lorsqu'on clique sur un lien, JQuery le détecte ($('a').click(function(){) et supprime toutes les classes "active" potentiellement présentes sur d'autres liens de la page ( $('ul li a').removeClass('active');) avant d'affecter cette classe au "a" cliqué $(this).addClass('active');..
J'espère avoir pu t'aider !
++
Bonjour, merci d'avoir prêté attention à mon problème, mais je pense m'être mal exprimé.
En fait, je n'ai pas de balises <a>, regarde plus pour savoir pourquoi.
Donc, j'ai un tableau, si on clique sur un <td>, cet élément va changer de couleur pour montrer dans quelle rubrique on se situe.
Mais, après, si on clique sur un autre <td>, il faudrait que l'ancien td revienne au style définit par le CSS. Et c'est bien ça que je ne sais pas comment faire.
Donc, j'aimerai un script qui "annule" les modifications faites par le javascript sur le style d'un élément; est-ce plus clair ?
Cordialement, belgikoi.
En fait, je n'ai pas de balises <a>, regarde plus pour savoir pourquoi.
Donc, j'ai un tableau, si on clique sur un <td>, cet élément va changer de couleur pour montrer dans quelle rubrique on se situe.
Mais, après, si on clique sur un autre <td>, il faudrait que l'ancien td revienne au style définit par le CSS. Et c'est bien ça que je ne sais pas comment faire.
Donc, j'aimerai un script qui "annule" les modifications faites par le javascript sur le style d'un élément; est-ce plus clair ?
Cordialement, belgikoi.
Hello,
La logique est la même, voici un exemple sans "a" et avec un tableau:
La logique est la même, voici un exemple sans "a" et avec un tableau:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('td').click(function(){
$('table td').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
td{
background-color:green;
height:40px;
width:40px;
cursor:pointer;
}
.active{
background-color:red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>click</td>
<td>click</td>
<td>click</td>
</tr>
<tr>
<td>click</td>
<td>click</td>
<td>click</td>
</tr>
<tr>
<td>click</td>
<td>click</td>
<td>click</td>
</tr>
</table>
</body>
</html>