Sujet Précédent Sujet Suivant

JavaScript, retour du style CSS

Résolu/Fermé
belgikoi Messages postés 44 Date d'inscription mercredi 30 novembre 2011 Statut Membre Dernière intervention 15 octobre 2012 - 24 déc. 2011 à 15:49
belgikoi Messages postés 44 Date d'inscription mercredi 30 novembre 2011 Statut Membre Dernière intervention 15 octobre 2012 - 26 déc. 2011 à 20:00
Bonjour,
je me demande si il y a une alternative au ':active' du css.
En fait, j'ai un menu, qui au lieu de changer le location de ma page, change le src d'un iframe, je ne peux donc pas utiliser de balises <a> (enfin, je crois, non ?).
Quand on clique sur l'un des éléments du menu, j'aimerai qu'il change de couleur pour montrer clairement dans quelle rubrique on se trouve. J'avais donc pensé en JS changer le 'style'; mais quand on clique sur un autre élément du menu, l'ancien élément cliqué reste comme on l'a laissé. Est-ce possible d'enlever les propriétés qu'on a ajouté ou de réinterpréter le CSS pour un élément en particulier ?

J'espère m'être bien exprimé et joyeux Noël à tous ;)


A voir également:

4 réponses

Réponse 1 / 4
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
25 déc. 2011 à 08:06
Salut,

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 !

++
0
Réponse 2 / 4
belgikoi Messages postés 44 Date d'inscription mercredi 30 novembre 2011 Statut Membre Dernière intervention 15 octobre 2012 6
25 déc. 2011 à 13:53
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.
0
Réponse 3 / 4
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
26 déc. 2011 à 19:57
Hello,

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>
0
Réponse 4 / 4
belgikoi Messages postés 44 Date d'inscription mercredi 30 novembre 2011 Statut Membre Dernière intervention 15 octobre 2012 6
26 déc. 2011 à 20:00
Ah, OK, j'aime ça !
Merci, je met mon POST en résolu illico ^^
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Quel est le lien de l'étiquette retour pour mon matériel Free ?
marmotte52 -
AigleBleu -

107 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Faire un retour à la ligne sur Google Sheet
29vitruve -
eric -

7 réponses