jQuery Girl
  1. jQuery Girl
  3. Sélectionnez une ancre dans un onglet JQUERY à partir d’un lien situé sur une autre page Web.
Intereting Posts
Jquery sticky nav uniquement lors du défilement jQuery UI Autocomplete utilisant un fichier json statique comme source Javascript “attendu ‘]’” Iframe avec pdf noir clignotant (clignotant) Le mode de démarrage de Twitter ne fonctionne pas correctement lors de la mise en œuvre dans asp.net mvc jQuery: contient avec HTML Une fois que vous avez désactivé le défilement par flèche dans le navigateur des utilisateurs, comment l’activer Syntaxe jQuery – quand utiliser $ (dollar) vs jQuery Javascript / Jquery – Ne te répète pas Comment déterminer le nombre de lignes affichées? Désactiver le bouton d’envoi après un clic avec validation? Remplacement de texte générique à l’aide de jquery PDFmake – table html à pdfmake table? Génération d’élément de liste x nombre de fois, en fonction des entrées de l’utilisateur Problème de largeur de conteneur pour accordéon ui.boostrap

Sélectionnez une ancre dans un onglet JQUERY à partir d’un lien situé sur une autre page Web.

Je suis un novice complet chez JQuery et Javascript. J’espérais que vous pourriez m’aider à résoudre mon problème.

J’utilise les tabs JQuery 1.7.2 et JQuery-ui 1.10.3.

À partir d’une URL externe, je souhaite pouvoir créer un lien vers une ancre située dans un onglet JQuery. Toutefois, le nom de l’onglet lui-même est également une ancre.

Je sais comment activer l’onglet dans lequel se trouve l’ancre 

eg http://mysite.com/#tab-1

mais où vais-je à partir de là?

Comment spécifier l’ancre à laquelle je souhaite créer un lien située dans l’onglet 1 à partir d’une URL? 

 eg http://mysite.com/#tab-1#myanchor

Voici le HTML 

     Untitled Document     $(function() {var tabs = $( "#tabs" ).tabs(); tabs.find( ".ui-tabs-nav" ).sortable( {axis: "x", stop: function() {tabs.tabs( "refresh" ); } } ); } );    
  
 
1st Tab
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at dui tempor, adipiscing nisl id, tempus nisi. Donec posuere pulvinar lacus, non suscipit eros ulsortingces. 
 
  
 
2nd Tab
 
Suspendisse lacus mi, ornare quis nulla eget, commodo auctor arcu. Proin ut erat vestibulum, vestibulum odio sit amet, dapibus nisi. Morbi nec semper mi. 
 
  
 
3rd Tab
 
Proin ullamcorper ornare ulsortingcies. Morbi bibendum mauris eu purus rhoncus, id lacinia sapien placerat. Nunc euismod lectus eu elit accumsan dignissim. 
 
Anchor is here

Toute aide serait grandement appréciée. Merci

J’ai trouvé ça, est-ce que cela peut vous être utile?

http://raw10.cust.magicedit.com/sandbox/jqueryTabs/

J’ai réussi à le faire fonctionner moi-même en fournissant à la fois le nom de l’onglet et le nom de l’ancre dans l’URL, puis en l’analysant avec javascript.

Après cela, j’ai ensuite transmis le numéro d’onglet à jquery pour l’ouvrir et j’ai fait un simple défilement animé jusqu’à l’ancre.

Par exemple, l’URL est http: // www. mysite.com # tab-3 & # myanchor javascript is 

 $(document).ready(function(){ var hash_parts = location.hash.split('&', 2); //2 - limit, may be changed if more than two arguments. var tab = hash_parts[0]; // Tab number part of url. Array starts at 0 for 1st element. var anc = hash_parts[1]; // Anchor name. var tabId = tab.split("-").pop()-1; // Tab no. relating to Jquery ui index no. (starts at zero for tab 1.) $("#tabs").tabs("option", "active", tabId); // Select the tab. $('html, body').animate({'scrollTop': $(anc).offset().top}, 1000); // Animated scroll to anchor. });

Ceci utilise JQuery UI 1.10.3 et JQuery 1.7.2

Pour résoudre un problème à l’aide d’un périphérique mobile, le deuxième numéro devient parfois% 23.

Pour corriger l’erreur, vous appendiez cette ligne au-dessus de la dernière ligne: 

  if(anc !== ''){ anc = anc.replace('%23', '#'); }