Activer div avec liens en ancrages

**Douce-neige** · 21/07/2012, 16h18

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:

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>

Pouvez-vous m'aider à résoudre ce problème s'il-vous-plait ?

Merci beaucoup !

**NoSmoking** · 22/07/2012, 12h47

Bonjour et bienvenue sur DVP.

Le pluging que tu utilises ne modifie effectivement pas la barre d'adresse et inhibe l'action par défaut du lien, il aurait d'ailleurs mieux convenu d'utiliser des BUTTON dans ce cas.

Ce pluging fait apparaître/disparaître les éléments souhaités.

La résolution, pour coller à ce que tu souhaites, passe par une autre approche que celle utilisée ici.

Activer div avec liens en ancrages

jQuery

Vue hybride

Discussions similaires

Partager

Partager