J'utilise du jQuery (tabs) pour faire un menu à onglets, mais étant un néophyte du JS, je n'arrive pas à faire en sorte que mes onglets changent de couleur lorsqu'il est cliqué.
J'ai un class="current" sur mon premier lien lorsqu'on arrive sur la page, et je ne vois pas comment dynamiquement appliquer cette classe aux autres liens lorsque ces derniers sont cliqués. Je vous met un bout de code, n'hésitez pas à me demander d'autres choses si vous pensez pouvoir m'aider, merci.
<div id="tabs">
<script type="text/javascript">
$(function() {
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Chargement impossible");
}
}
});return false;
});
</script>
<ul id="slider_menu">
<li id="bt1" class="boutons"><a href="#tabs-1" title="Reportage" class="current"><span>Reportage</span></a></li>
<li id="bt2" class="boutons"><a href="_scripts/tabs/videos09.html" title="Videos"><span>Vidéos</span></a></li>
<li id="bt3" class="boutons"><a href="_scripts/tabs/diapo09.html" title="Diaporama"><span>Diaporama<br>Photos</span></a></li>
<li id="bt4" class="boutons"><a href="_scripts/tabs/carte.html" title="Carte"><span>Carte<br>Touristique</span></a></li>
</ul>
Voilà en fait à part le premier lien qui cible un div de la page afin d'être préloadé, les autres sont chargé via ajax depuis des sources externes.
J'ai un class="current" sur mon premier lien lorsqu'on arrive sur la page, et je ne vois pas comment dynamiquement appliquer cette classe aux autres liens lorsque ces derniers sont cliqués. Je vous met un bout de code, n'hésitez pas à me demander d'autres choses si vous pensez pouvoir m'aider, merci.
<div id="tabs">
<script type="text/javascript">
$(function() {
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Chargement impossible");
}
}
});return false;
});
</script>
<ul id="slider_menu">
<li id="bt1" class="boutons"><a href="#tabs-1" title="Reportage" class="current"><span>Reportage</span></a></li>
<li id="bt2" class="boutons"><a href="_scripts/tabs/videos09.html" title="Videos"><span>Vidéos</span></a></li>
<li id="bt3" class="boutons"><a href="_scripts/tabs/diapo09.html" title="Diaporama"><span>Diaporama<br>Photos</span></a></li>
<li id="bt4" class="boutons"><a href="_scripts/tabs/carte.html" title="Carte"><span>Carte<br>Touristique</span></a></li>
</ul>
Voilà en fait à part le premier lien qui cible un div de la page afin d'être préloadé, les autres sont chargé via ajax depuis des sources externes.