Wie machen Sie ein div-Tag in einen Link

Question

Wie machen Sie ein div-Tag in einen Link. Ich möchte, dass mein gesamtes Div klickbar ist.

Answer 1

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div> 

Answer 2

JS:

<div onclick="location.href='url'">content</div> 

jQuery:

$("div").click(function(){ 
    window.location=$(this).find("a").attr("href"); return false; 
}); 

Stellen Sie sicher, cursor:pointer für diese DIVs

Answer 3

Sie die Funktion gesamte DIV machen verwenden als Verbindung durch eine Additions onclick = "window.location = 'TARGET URL'" und indem Sie den Stil auf "cursor: pointer" setzen. Es ist jedoch oft eine schlechte Idee, dies zu tun, da Suchmaschinen dem resultierenden Link nicht folgen können, Leser nicht in der Lage sind, Tabulatoren zu öffnen oder den Link zu kopieren, etc. Stattdessen können Sie ein reguläres Anchor-Tag erstellen und legen Sie dann seinen Stil für die Anzeige fest: blockieren Sie und formatieren Sie diesen wie bei einem DIV.

Answer 4

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div> 

Answer 5

TUN SIE ES NICHT.

• Wenn Sie einen Link wollen, wickeln Sie den Inhalt in der richtigen <A>NCHOR</a>.
• Wenn Sie die <DIV> in einen Link umwandeln möchten, verwenden Sie „Javascript“ die <DIV> innerhalb eines <A>NCHOR</A>
• einzuwickeln Wenn Sie eine Aktion ausführen möchten, wenn die <DIV> die onclick Event-Handler ... und don verwenden, klicken‘ Ich nenne es einen "Link".

Answer 6

Sie könnten Javascript verwenden, um diesen Effekt zu erzielen. Wenn Sie einen Rahmen verwenden, wird diese Art von Dingen ziemlich einfach. Hier ist ein Beispiel in jQuery:

$('div#id').click(function (e) { 
    // Do whatever you want 
}); 

Diese Lösung hat den entscheidenden Vorteil, dass die Logik nicht in Ihrem Markup zu halten.

Answer 7

Wenn Sie Ihr Anker-Tag innerhalb des div setzen müssen, können Sie auch CSS verwenden, um den Anker so einzustellen, dass er das div über display: block füllt.

Als solche:

<div style="height: 80px"><a href="#" style="display: block">Text</a></div> 

Nun, wenn der Benutzer den Cursor schwebt, dass der Anker-Tag div die div füllen.

Answer 8

Wenn Sie HTML5 verwenden, wie in this other Frage hingewiesen, können Sie Ihr div innerhalb a setzen:

<a href="http://www.google.com"><div>Some content here</div></a> 

preffer diese Methode, wie sie in Ihrer Struktur, die alle Inhalte klickbare klar machen, ist, und wohin es zeigt.

Answer 9

Sie wollen also, dass ein Element etwas ist, was es nicht ist?

Im Allgemeinen ist dies keine gute Idee. Wenn Sie einen Link benötigen, verwenden Sie einen Link. Meistens ist es einfacher, das entsprechende Markup genau dort zu verwenden, wo es hingehört.

Das alles gesagt, manchmal müssen Sie nur die Regeln brechen. Nun stellt sich die Frage nicht javascript haben, also werde ich die rechtlichen Hinweise setzen hier:

Sie keine <div> fungieren als Bindeglied haben kann, ohne entweder über einen Link (oder gleichwertig, wie ein <form> die nur eine Schaltfläche zum Senden enthält) oder JavaScript verwenden.

Von hier an wird diese Antwort davon ausgehen, dass JavaScript erlaubt ist, und weiterhin, dass jQuery verwendet wird (zur Verkürzung des Beispiels).

Mit dem alles gesagt, lassen Sie sich in das, was einen Link einen Link macht.

Links sind in der Regel Elemente, auf die Sie klicken, um zu einem neuen Dokument zu navigieren.

Es scheint einfach genug. Hören Sie ein Klick-Ereignis und den Standort wechseln:

_{dies nicht tun}

$('.link').on('click', function() { 
 
    window.location = 'http://example.com'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link">Fake Link</div>

Da haben Sie es, ist die <div> jetzt ein Link. Warte ... was ist das? Was ist mit Zugänglichkeit? Oh, richtig, Screenreader und Benutzer von Hilfstechnologien werden nicht in der Lage sein, auf den Link zu klicken, besonders wenn sie nur die Tastatur benutzen.

Befestigung, die ziemlich einfach ist, lassen Sie uns Tastatur nur Benutzern erlauben, die <div> zu konzentrieren, und lösen das Click-Ereignis, wenn sie drücken Enter:

_{Tu das nicht entweder}

$('.link').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link" tabindex="0">Fake Link</div>

Auch hier haben Sie es, diese <div> ist jetzt ein Link. Warte nocheinmal? Noch Zugänglichkeitsprobleme? Oh ok, so stellt sich heraus, dass die assistive Technologie nicht weiß, dass die <div> noch ein Link ist, also obwohl Sie über die Tastatur dorthin gelangen können, wird den Benutzern nicht gesagt, was damit zu tun ist.

Glücklicherweise gibt es ein Attribut, das verwendet werden kann, um die Standardrolle eines HTML-Elements zu überschreiben, so dass Screenreader und Ähnliches benutzerdefinierte Elemente wie unsere <div> hier kategorisieren können. Das Attribut ist natürlich das [role] Attribut, und es sagt schön Screenreadern, die unsere <div> ist ein Link:

_{Ugh, das ist jede Minute immer schlimmer}

$('[role="link"]').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div>

Schließlich unsere <div> ist ein lin --- oh jetzt beschweren sich die anderen devs. Was jetzt?

Ok, also mögen die Entwickler den Code nicht. Sie haben versucht, preventDefault auf der Veranstaltung, und es funktioniert einfach weiter. Das ist einfach zu beheben:

_{Ich habe dich gewarnt diese}

$(document).on({ 
 
    'click': function (e) { 
 
    if (!e.isDefaultPrevented()) { 
 
     window.location = 'http://example.com'; 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div> 
 
<div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

Es war schlecht wir haben es --- Noch mehr? Was weiß ich sonst nicht? Sag mir alles JETZT, damit ich es beheben kann!

• Ok, es gibt keine Möglichkeit, ein Ziel anzugeben. Wir können das beheben, indem wir auf window.open aktualisieren.
• Click-Ereignisse und Tastaturereignisse ignorieren Ctrl, Alt und Shift- Tasten. Das ist einfach genug, Sie müssen nur diese Werte für das Ereignisobjekt überprüfen.
• Es gibt keine Möglichkeit, kontextbezogene Daten anzugeben. Fügen Sie einfach einige [data-*] Attribute hinzu und nennen Sie es einen Tag damit.
• Das Klickereignis entspricht nicht der verwendeten Maustaste, die mittlere Maus sollte in einem neuen Tab geöffnet werden, die rechte Maustaste sollte das Ereignis nicht auslösen. Einfach genug, fügen Sie den Event-Listenern einfach weitere Checks hinzu.
• Die Stile sehen komisch aus. GUT VON KURS DIE STILE SIND WEIRD, ES IST A <DIV> NICHT ANKER!

gut, werde ich die ersten vier Probleme ansprechen, und nicht mehr. Ich hatte es mit diesem dummen benutzerdefinierten Element Müll. Ich hätte einfach ein <a> Element von Anfang an verwenden sollen.

_{Told you so}

$(document).on({ 
 
    'click': function (e) { 
 
    var target, 
 
     href; 
 
    if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) { 
 
     target = $(this).data('target') || '_self'; 
 
     href = $(this).data('href'); 
 
     if (e.ctrlKey || e.shiftKey || e.which === 2) { 
 
     target = '_blank'; //close enough 
 
     } 
 
     open(href, target); 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger({ 
 
     type: 'click', 
 
     ctrlKey: e.ctrlKey, 
 
     altKey: e.altKey, 
 
     shiftKey: e.shiftKey 
 
     }); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div> 
 
<div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div> 
 
<div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

_{Beachten Sie, dass Schnipsel nicht öffnen Popup-Fenster stapeln, weil, wie sie Sandbox sind.}

Das ist es. Das ist das Ende dieses Kaninchenlochs. All diese Verrücktheit, wenn Sie einfach gehabt haben könnten:

<a href="http://example.com/"> 
    ...your markup here... 
</a> 

Der Code, den ich hier gepostet habe, hat wahrscheinlich Probleme. Es hat wahrscheinlich Bugs, die ich noch nicht erkannt habe. Der Versuch, zu reproduzieren, welche Browser Sie kostenlos zur Verfügung stellen, ist schwierig. Es gibt so viele Nuancen, die leicht übersehen werden können, dass es einfach nicht wert ist, 99% der Zeit nachzuahmen.

Answer 10

Beachten Sie, dass Suchspider JS-Code nicht indexieren. Wenn Sie also Ihre URL in den JS-Code einfügen, müssen Sie sie auch in einen herkömmlichen HTML-Link an anderer Stelle auf der Seite einfügen. Das heißt, wenn Sie möchten, dass die verlinkten Seiten von Google indexiert werden, usw.