11068 sujets

JavaScript, DOM et API Web HTML5

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)
Modérateur
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?