.show / .hide sur plusieurs div

Bonsoir,

Je me permets de vous écrire car j'essaye petit a petit de créer une page web "devis" en jQuery.. Le site est un prototype et fonctionne sur Firefox mais malheureusement pas sur Chrome..

J'utilise

var $contents = $('.tab-content');
$contents.hide();
$('.tab').click(function() {
  var $target = $('#' + this.id + 'show').show();
  $contents.not($target).hide();
});

Pour cacher mes différentes divs, et afficher les bonnes une fois choisies..

  <select id="cat-tshirt">
            <option value="0" id="tab3" class="tab">Selection</option>
			<option value="3.71" id="tab1" class="tab">B&C 190gr - CGTU03T</option>
			<option value="3.72" id="tab5" class="tab">B&C 190gr - Femme - CGTW04T</option>
			<option value="7.71" id="tab4" class="tab">B&C 190gr - Manche Longue - CGTU03T</option>
			<option value="5.94" id="tab6" class="tab">B&C 190gr - Femme - ML - CGTW08T</option>
			<option value="5.34" id="tab2" class="tab">T-shirt Kariban 190gr - K356</option>
			
		</select>

<div  id="tab1show" class="tab-content">
            <div id="image"><img src="img/CGTU03T.jpg" style="width: 100%; float:left; padding-top: 1%"></div>
        </div>
		
		<div  id="tab4show" class="tab-content">
            <div id="image"><img src="img/CGTU07T.jpg" style="width: 100%; float:left; padding-top: 1%"></div>
        </div>
		
		<div  id="tab5show" class="tab-content">
            <div id="image"><img src="img/CGTW04T.jpg" style="width: 100%; float:left; padding-top: 1%"></div>
        </div>

Je vous joins ci dessous l'aperçu : www.ineart.be/devis

Avez-vous une solution a ce problème ? Comment faire la meme chose mais fonctionnant sur chrome également?

En vous remerciant d'avance de votre aide,

bien à vous,
NeSo
Modifié par NeSo (23 Jan 2021 - 21:02)

Et l'eau,

méthodo :
- "change" est plus approprié pour un select
- je masque tout
- j'affiche celui qui m'intéresse

Bonjour,

Merci pour votre réponse rapide,
Mais je pense avoir un soucis quelque part dans le code mais je ne vois pas bien d'ou..

J'ai tenté de faire :

$( ".tab" ).change(function() {
  alert( "test" );
});

Ou meme un

$( ".tab" ).click(function() {
  alert( "test" );
});

L'alerte s'affiche bien sur Firefox mais rien ne se passe sur Chrome..
Une petite idée?

NeSo a écrit :

Une petite idée?

la validité du code html ?