Tabs Jquery et liens

Version imprimable

Bonjour à tous,

Pas très copain avec JS/Jquery je sèche complètement sur un problème :
j'utilise un script de navigation par onglet mais je n'arrive pas à faire un lien d'une div à l'autre : index.html#tab-3 par exemple.
Cela fonctionne parfaitement en cliquant sur un onglet pas pas via un lien présent dans une div :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="tabs">
<ul>
<li><a href="#tab-1">Menu 1</a></li>
<li><a href="#tab-2">Menu 2</a></li>
<li><a href="#tab-3">Menu 3</a></li>
</ul>

<div id="tab-1">
Texte div 1 problème :
<A HREF="#tab-3">MON LIEN VERS DIV 3</A>
ou <A HREF="index.html#tab-3">MON LIEN VERS DIV 3</A> idem
</div>
<div id="tab-2">
Texte div 2
</div>
<div id="tab-3">
Texte div 3
</div>
</div>

Et voici le JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <script type="text/javascript">
    $(document).ready(function(){
    $('#tabs div').hide(); // Hide all divs
    $('#tabs div:first').show(); // Show the first div
    $('#tabs ul li:first').addClass('active'); // Set the class for active state
    $('#tabs ul li a').click(function(){ // When link is clicked
    $('#tabs ul li').removeClass('active'); // Remove active class from links
    $(this).parent().addClass('active'); //Set parent of clicked link class to active
    var currentTab = $(this).attr('href'); // Set currentTab to value of href attribute
    $('#tabs div').hide(); // Hide all divs
    $(currentTab).show(); // Show div with id equal to variable currentTab
    return false;
    });
    });
    </script>

J'ai regardé la doc JQuery concernant les sélecteurs mais rien à faire.
Si quelqu'un pouvait m'aider ce serait tout simplement fabuleux.

Merci à vous.

16/03/2012, 17h11
NoSmoking

Bonjour,
Bovino t'as mâché le travail http://dmouronval.developpez.com/tut...s-avec-jquery/
16/03/2012, 17h26
Gaetan_

Merci mais pas avec les liens internes aux divs, ça ne fonctionnera pas :cry:

pour suivre un lien d'une DIV à l'autre il te faudra oublier les HREF du type index.html#ancre qui par définition ouvre la page index.html et se place sur l'ancre indiquée.

A partir du script fourni, il te faut changer d'approche et considérer toutes les balises A appartenant à <div id="tabs">, donc exit $('#tabs ul li a').click(function(){ et bienvenue à $('#tabs a').click(function(){.

Ensuite il te faut tester que HREF commence par # sinon on laisse faire la nature.

Enfin il te faut modifier l'aspect de l'onglet même quand il y a clic sur une balise A d'une DIV et non pas d'une LI.

On se retrouve avec quelque chose comme

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  $(document).ready(function(){
    $('#tabs div').hide();                    // Hide all divs
    $('#tabs div:first').show();              // Show the first div
    $('#tabs ul li:first').addClass('active');// Set the class for active state
// OUT    $('#tabs ul li a').click(function(){            // When link is clicked
    $('#tabs a').click(function(){            // When link is clicked
 
      $('#tabs ul li').removeClass('active'); // Remove active class from links
// OUT      $(this).parent().addClass('active');    //Set parent of clicked link class to active
 
      var currentTab = $(this).attr('href');  // Set currentTab to value of href attribute
      if( currentTab.charAt(0) == '#'){
        $('#tabs div').hide();                // Hide all divs
        $(currentTab).show();                 // Show div with id equal to variable currentTab
        // mise du style sur l'onglet
        $('#tabs ul li a').each( function(){
          if($(this).attr('href') == currentTab){
            $(this).parent().addClass('active');    //Set parent of clicked link class to active
          };
        });
        return false;
      }
    });
  });

17/03/2012, 11h13
Bovino

Citation:

Envoyé par Gaetan_

Merci mais pas avec les liens internes aux divs, ça ne fonctionnera pas :cry:

Première nouvelle... :roll:

Et il se passe quoi si dans ton code, tu mets un lien du type

Code:

$('#onglets li').eq(1).click()

?
19/03/2012, 12h46
Gaetan_

Merci à vous deux c'est parfait.

Bovino, toutes mes excuses, j'étais passé effectivement à coté du script.

NoSmoking, super, ca marche pil poil.

Un grand merci à vous deux.