11540 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Jquery tabs - navigation

bonjour à tous,

j'utilise jquery tabs (navigation en onglet) dans un de mes sites et je voudrai savoir s'il est possible de mettre un lien au sein d'in onglet qui permet d'ouvrir un autre onglet au lieu de devoir cliquer sur l'onglet lui même.

ex: je suis sur l'onglet "jeux vidéo", en bas de cet onglet je met un lien voir les mangas(mangas est aussi un onglet). en cliquant sur ce lien j'ouvre l'onglet appelé.

Est-possible?

merci par avance
Modifié par Latomate (06 Jul 2010 - 14:58)
Bonjour,

Tu dois pouvoir le faire à l'aide des ancres, en rajoutant #id_onglet à la fin de l'adresse tu arrives directement sur l'onglet concerné.
il s'agit de jquery UI.

j'ai deja test avec l'appel #id_onglet dans le <a href="#id_onglet"> mais celan ne marche pas
Ah exact désolé, j'avais testé avec un lien pointant sur une autre page contenant les onglets, et la l'onglet par défaut est bien celui indiqué dans l'adresse...
Hello,

<a class="tabOpen" href="#mangas">Mangas</a>

$("a.tabOpen").click(function(e) {
  $("#tabs").tabs("select", $(this).attr("href"));
  e.preventDefault();
});

(non testé)
@Julien royer: j'ai testé et cela m'ouvre par défaut l'onglet mais lorsque je clique sur le lien cela ne me renvoi pas vers l'onglet.

merci quand même Smiley cligne

edit: non en fait ça ne marche pas mais cela n'ouvre pas d'onglet par defaut
Modifié par Latomate (05 Jul 2010 - 15:58)
Tu as une page de test ?

"#tabs" doit évidemment être remplacé par un sélecteur ciblant l'élément sur lequel tu as appelé la méthode "tabs".
oui oui bien sur, j'ai remplacé #tabs par mon ID ou se trouve la navigation.

je post le code bientôt pour te montrer tout ça

merci
voici ma page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script type="text/javascript">// script pr les onglets
  $(document).ready(function() {
    $("#nav_onglet").tabs();
  });
</script>


<script type="text/javascript">
$("a.tabOpen").click(function(e) { 
  $("#nav_onglet").tabs("select", $(this).attr("href")); 
  e.preventDefault(); 
});
</script>

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="nav_onglet">
            		   		
                    <ul>
                      
                      <li><a href="#jx_video">Jeux video</a></li>
                      <li><a href="#mangas">Mangas</a></li>
                      
                    </ul>
		
            <div id="jx_video">
            <a class="tabOpen" href="#mangas">lien vers mangas</a>
			    
  			</div>
                    
            <div id="mangas">page mangas</div>            
            
</div>

</body>
</html>


comme tu peux voir j'ai remplacé #tabs par #nav_onglet ici
Modifié par Julien Royer (06 Jul 2010 - 09:41)
Bonjour,

Le code que je t'ai donné doit être exécuté après que le navigateur ait rencontré l'élément correspondant (<a class="tabOpen" ... />), sinon $("a.tabOpen") renvoie une liste vide...

Une solution consiste à placer ce code dans le bloc "ready" :

$(document).ready(function() { 
  $("#nav_onglet").tabs();

  $("a.tabOpen").click(function(e) {  
    $("#nav_onglet").tabs("select", $(this).attr("href"));  
    e.preventDefault();  
  });
});

P.S. : il est conseillé de placer les trois éléments script que tu utilises à la fin de l'élément body :
<script ... />
<script ... />
<script ... />

</body>
</html>

En effet, le code contenu dans ces éléments n'a pas besoin de s'exécuter avant le chargement complet de la page.
Sujet clos
Aller à