Alternative zu javascript:function im Link

[supercat1510]

Ich benutze folgenden Code um meinen Content beim Seitenwechsel zu animieren (aus- und einblenden).

$(document).ready(function(){
$("#content").toggle("slide");
});
function slideup(linkziel) {
     $("#content").toggle("slide", function() {
          window.location.href = linkziel;
     });
};

Bisher funktioniert das super, ABER nur wenn der Link so erstellt wird:

<a href="javascript:slideup('index-2.htm');">Menüpunkt</a>

Gibt es hier eine alternative über jQuery?

 

[SpiceLab]

Verwende den onclick-Eventhandler:

<a href="index-2.htm" onclick="slideup('index-2.htm'); return false">...</a>

return false verhindert hier, dass der Browser bei aktiviertem JS dem Verweisziel im href-Attribut folgt. Sollte JS im Browser deaktiviert sein, wäre das Verweisziel für den Besucher weiterhin über das href-Attribut erreichbar.

 

[supercat1510]

Und geht das auch indem man es direkt ins jQuery schreibt und nicht an den Link anhängt?

 

[SpiceLab]

Schau mal hier: http://api.jquery.com/click/

 

[Quaese]

Hi,

es ist besser, die on-Methode zum Registrieren von Events zu verwenden: http://api.jquery.com/on/

Zu deiner Frage:
Du könntest Links, die einen Verweis enthalten sollen, mit einem data-Attribut auszeichnen. Dieses Attribut enthält als Wert das Sprungziel. Weiterhin kannst du die Links anhand dieses Attributs identifizieren und an zentraler Stelle mit dem onclick-Handling versehen.

Beispiel:
HTML

<a href="#" data-toggle="http://www.tutorials.de/">tutorials.de</a>
<a href="#" data-toggle="http://www.google.de.de/">google.de</a>

JavaScript

(function($){
    $(function(){
        $('a[data-toggle]').each(function(index, elem){
            $(elem).on('click', function (evt) {
                evt.preventDefault();
               
                var linkziel = $(this).data('toggle');
               
                $("#content").toggle("slide", function() {
                    window.location.href = linkziel;
                });
            });
        });
    });
})(jQuery)

Live-Beispiel: http://jsfiddle.net/Quaese/bwv9o72x/
(es wird der Wert des data-Attribut nur in einer alert-Box ausgegeben)

Ciao
Quaese