Pourquoi un code jquery ne fonctionne que si elle est à la fin de ma section html-corps?
-
11-09-2019 - |
Question
Je le code suivant pour créer des onglets. Il fonctionne à la fin de la section du corps html mais pas si je le place au début - avant que tous les divs sont définis. Pourquoi pourrait-il être?
<script type="text/javascript">
$("ul.tabs li.label").hide();
$("#tab-set > div").hide();
$("#tab-set > div").eq(0).show();
$("ul.tabs a").click(
function() {
$("ul.tabs a.selected").removeClass('selected');
$("#tab-set > div").hide();
$(""+$(this).attr("href")).show();
$(this).addClass('selected');
return false;
}
);
$("#toggle-label").click( function() {
$(".tabs li.label").toggle();
return false;
});
</script>
La solution
vous avez besoin de l'envelopper avec un document bloc prêt. cela empêche le code de cuisson jusqu'à ce que la page est complètement chargée.
<script type="text/javascript">
$(function() {
// do something on document ready
$("ul.tabs li.label").hide();
$("#tab-set > div").hide();
$("#tab-set > div").eq(0).show();
$("ul.tabs a").click(
function() {
$("ul.tabs a.selected").removeClass('selected');
$("#tab-set > div").hide();
$(""+$(this).attr("href")).show();
$(this).addClass('selected');
return false;
}
);
$("#toggle-label").click( function() {
$(".tabs li.label").toggle();
return false;
});
});
</script>
Autres conseils
Il est très probable parce que le DOM est pas encore prêt, et donc ils n'existent pas.
Par conséquent, vous devez faire ce qui suit:
$(function() {
// Any code in here will only be executed when the DOM is ready.
});
jQuery(function($) {
// put your code in here and it will be executed
// when the document has fully loaded.
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow