Discussion :

[Gaetan_]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[NoSmoking]

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

[Gaetan_]

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
      }
    });
  });

[Bovino]

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

Première nouvelle...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

?

[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.