Link abfangen oder deaktivieren

[Noeden]

Hallo,

hab da ne Frage: Ich habe ganz viele Links und ich möchte diese mit einer Checkbox aktiveren bzw deaktivieren
Wie mach ich das am Besten? Ich könnte ja per jQuery einfach an dem href spielen, aber da das alles verschiedene Links sind wäre das viel Arbeit und Code. Da gibt es doch sicherlich etwas eleganteres?


Danke
Noeden

 

[rd4eva]

Verwende doch einfach einen onclick-Handler mit return false;
Zum Beispiel so:

$(document).ready(function(){
    $('#enable').click(function(){
        $('a').unbind('click');       
    });
    $('#disable').click(function(){       
        $('a').click(function(){return false;});
    });
});

 

[Noeden]

Sorry, da steig ich nicht durch :-D
Also. wenn man das Element enable anklickt, dann wird von dem a-Element das Clickevent entfernt(Klicken bringt nichts mehr, auch keinen Linkaufruf!?) Und was soll das return false beim anklicken des a-Elements bewirken, wenn es disabled ist? Sorry, steh aufm Schlauch bin auch recht neu.

Am besten wäre es, wenn man zwischen dem href als link ausführen und noch einer Funktion wechseln könnte .... hmmm


Dankeschonmal


Hatte es am falschen Element ausprobiert (Am div und nicht am a das darin liegt.) Sorry! return false blockiert das. SUPER DANKE!!

 

[rd4eva]

Sorry wusste nicht wie gut deine Kenntnisse sind.

Das dazugehörige HTML sähe z.B. so aus

<a href="www.foobar.de">link</a>
<input type="button" id="enable" value="enable" />
<input type="button" id="disable" value="disable" />

Das Script funktioniert ganz einfach so:
Klickt man auf den disable Button dann wird jedem Link ein onclick-Handler zugewiesen der nur ein return false; bewirk.
Ein Link würde dann im Prinzip so aussehen :
<a href="..." onclick="return false;">...</a>
Wie du richtig erkannt hast bewirkt das return false; das der Link nicht verfolgt wird.

Klickt man nun auf den enable Button wird der onclick Handler ( und somit das return false ) wieder entfernt.

 

[Noeden]

Und würde man kein Return in die Funktion schreiben, würde der Link nach der Funktion ausgeführt werden ... DANKE Sehr freundlich

 

[Noeden]

Wie sich herausstellte kann ich das auch noch woanders brauchen. Aber da funktioniert es nicht so gut, weil bei dem Klick noch mehr ausgeführt werden muss und anscheinend Lädt der dann flott den Link, bevor er bei der Funktion beim return ankommt.

Also habe ich bei dem Link ein onclick="return false;" eingebaut. Das ist mein Code, leider wohl etwas unübersichtlich. der PHP-Teil erstellt einfach die Divs.

<?php
    $db_link = mysqli_connect(SERVER, USER, PASSWORT, DATENBANK);
    
    $sqlakkordeon1 = "SELECT * FROM `Akkordeon`";
    $sqlakkordeon1abfrage = mysqli_query($db_link, $sqlakkordeon1);
    $ButtonZahl = array();
    $ButtonName = array();
    $i = 0;
    
    while($Akkordeon1 = mysqli_fetch_assoc($sqlakkordeon1abfrage)){
        if($Akkordeon1['Position']=='Aussen'){
            $ButtonZahl[$Akkordeon1['Name']] = 0;
            $ButtonName[$i]= $Akkordeon1['Name'];
            $i++;
            
            echo '<div id="'.$Akkordeon1['Name'].'" class="AkkordeonmenueAussen"><a href="'. LINK . $Akkordeon1['Link'] . '" onclick="return false;" ><img src="' . $Akkordeon1['BildPassiv'] . '" /></a></div>';
            $akkordabgleich = substr($Akkordeon1['Name'], 0, 4);                    //Zum Abgleich die ersten 4 Zeichen von $Akkordeon1['Name'] speichern
            // Jetzt schreiben wir die Divs, bei denen die ersten 4 Buchstaben beim Namen gleich sind aber INNEN
            $sqlakkordeon2 = "SELECT * FROM `Akkordeon`";
            $sqlakkordeon2abfrage = mysqli_query($db_link, $sqlakkordeon2);
            echo '<div class="akkin">';
            while($Akkordeon2 = mysqli_fetch_assoc($sqlakkordeon2abfrage)){
                $akkordabgleich2 = substr($Akkordeon2['Name'], 0, 4);
                if($Akkordeon2['Position']=='Innen' && $akkordabgleich == $akkordabgleich2){
                    echo '<div id="'.$Akkordeon2['Name'].'" class="AkkordeonmenueInnen"><a href="'. LINK . $Akkordeon2['Link'] .'"><img src="'.LINK.$Akkordeon2['BildPassiv'].'" /></a></div>';
                    echo '<div id="'.$Akkordeon2['Name'].'Banner"><img src="'.LINK.$Akkordeon2['Banner'].'" /></div>';
                    $ButtonZahl[$Akkordeon1['Name']]++;
                }
            }
            // Und noch das Themenbanner
            echo '<div style="float:left;" id="'.$Akkordeon1['Name'].'Banner"><img src="'. LINK . $Akkordeon1['Banner'].'" /></div>';
            echo '</div>';
        }
        if($Akkordeon1['Position']=='Banner'){
            echo '<div style="float:left;" id="WlBanner" class="WillkommenBanner"><img class="WillkommenBanner" src="'. LINK . $Akkordeon1['Banner'] .'" /></div>';
        }
    }
?>

<script type="text/javascript">
    var ButtonZahl = new Array;
    var ButtonName = new Array;
    <?php
    foreach($ButtonName as $key => $value){
      echo 'ButtonName['.$key.'] = "'.$value.'";';
      echo 'ButtonZahl["'.$value.'"] = "'.$ButtonZahl[$value].'";';
    }
    ?>
    $(document).ready(function () {
        var AkkordeonPlatz = $("#Akkordeonmenu").css("width").substr(0, 3) - (ButtonName.length * 70);
        var AkkordeonPlatztmp = 0;
    //ButtonName[0] - Erster AussenButton // ButtonZahl[ButtonName[0]] = Buttons unter dem ersten AussenButton
    
        $(".AkkordeonmenueInnen").css({width: "0px", height: "150px"});
        $(".AkkordeonmenueInnen").children().children().css({width: "0px", height: "150px"});    
        $("[id*=Banner]").css({float: "left", width: "0px", height: "150px"});
        $("[id*=Banner]").children().css({width: "0px", height: "150px"});
        $(".WillkommenBanner").css("width", AkkordeonPlatz + "px");
        $(".WillkommenBanner").children().css("width", AkkordeonPlatz + "px");
        
                
        $(".AkkordeonmenueAussen").click(function(){
            if($(this).next().children().css("width").slice(0, -2) < 10){
                
                $(this).parent().children().children().attr('onclick', 'return false;');
                $("#Akkordeonmenu").children("[class=akkin]").children().animate({width: "0px"}, 1000);
                $("#Akkordeonmenu").children("[class=akkin]").children().children().animate({width: "0px"}, 1000);
                $("#Akkordeonmenu").children("[class=akkin]").children().children().children().animate({width: "0px"}, 1000);
                $(".WillkommenBanner").animate({width: "0px"}, 1000);
                $(this).children().attr('onclick', 'return')
                $(this).next().children("[class=AkkordeonmenueInnen]").animate({width: "50px"}, 1000);
                $(this).next().children("[class=AkkordeonmenueInnen]").children().children().animate({width: "50px"}, 1000);
                $(this).next().children().last().animate({width: "150px"}, 1000);
                $(this).next().children().last().children().animate({width: "150px"}, 1000);
            }
        });
        
        
    });
</script>

Jetzt ist es aber so, dass wenn ich eins der äußeren Divs anklicke, dann öfnnet sich der Link nicht, wenn ich dann aber irgendeins der öußeren anklicke öffnet sich der Link. (Egal ob ich das vorher schon angeklickt habe. Ich finde den Fehler nicht. Geht das mit der Funktion unten nicht?