Bonjour.
J'ai un soucis pour activer directement des divs via des liens à ancrage avec l'une de mes pages, programmés en JQuery.
Je m'explique, lorsque je clique sur l'un des lien comme dans cette exemple: http://css-tricks.com/examples/OrganicTabs/, cela affiche dans la barre du navigateur: www-exemple-fr/test.php#2 et qu'en je souhaite retourner via ce lien pour accéder directement à la partie #2 de ma page, rien n'y fait, cela affiche toujours la partie #1... Comme si rien n'est pris en compte après le /test.php
Au départ le code Jquery utilisait la fonction return false;.
Mais cela empêcher d'afficher dans la barre de navigation après le /test.php, les #1, #2... Donc je l'ai passé en true.
Voici le code complet utilisé en JQuery:
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78 (function($) { $.organicTabs = function(el, options) { var base = this; base.$el = $(el); base.$nav = base.$el.find(".nav"); base.init = function() { base.options = $.extend({},$.organicTabs.defaultOptions, options); // Accessible hiding fix $(".hide").css({ "position": "relative", "top": 0, "left": 0, "display": "none" }); base.$nav.delegate("div > a", "click", function() { // Figure out current list via CSS class var curList = base.$el.find("a.current").attr("href").substring(1), // List moving to $newList = $(this), // Figure out ID of new list listID = $newList.attr("href").substring(1), // Set outer wrapper height to (static) height of current inner list $allListWrap = base.$el.find(".contenu-larace"), curListHeight = $allListWrap.height(); $allListWrap.height(curListHeight); if ((listID != curList) && ( base.$el.find(":animated").length == 0)) { // Fade out current list base.$el.find("#"+curList).fadeOut(base.options.speed, function() { // Fade in new list on callback base.$el.find("#"+listID).fadeIn(base.options.speed); // Adjust outer wrapper to fit new list snuggly var newHeight = base.$el.find("#"+listID).height(); $allListWrap.animate({ height: newHeight }); // Remove highlighting - Add to just-clicked tab base.$el.find(".nav a").removeClass("current"); $newList.addClass("current"); }); } // Don't behave like a regular link // Stop propegation and bubbling return true; }); }; base.init(); }; $.organicTabs.defaultOptions = { "speed": 300 }; $.fn.organicTabs = function(options) { return this.each(function() { (new $.organicTabs(this, options)); }); }; })(jQuery);
Voici le code utilisé dans ma page:
Pouvez-vous m'aider à résoudre ce problème s'il-vous-plait ?
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
25
26
27
28
29
30
31
32
33
34
35 <head> <script> $(function() { $("#exemple1").organicTabs({ "speed": 200 }); }); </script> </head> <body> <div id="exemple1"> <div class="nav"> <div class="exemple2"><a href="#1" class="current">BlaBla</a></div> <div class="exemple3"><a href="#2">BlaBla</a></div> <div class="exemple4"><a href="#3">BlaBla</a></div> <div class="exemple5"><a href="#4">BlaBla</a></div> <div class="exemple6"><a href="#5">BlaBla</a></div> </div> <div class="exemple7"> <div id="1"> Test </div> <div id="2" class="hide"> Test </div> <div id="3" class="hide"> Test </div> <div id="4" class="hide"> Test </div> <div id="5" class="hide"> Test </div> </div> </div> </body>
Merci beaucoup !
Partager