Buttons in einem div in einem a-Tag ansprechen?
Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.
5 Antworten
Ein div ist ein Blockelement, das darf eigentlich nicht in einem a stehen...
Zu deinem Problem: schreib die Buttons unter den Link und zeige sie mit top:-100px oder sowas weiter oben an. Wenn man den Quelltext nicht hat, ist da schlecht was genaueres zu sagen.
Ein div ist ein Blockelement, das darf eigentlich nicht in einem a stehen...
Das Div-Element innerhalb des Ankers ist nicht das Problem, sondern die darauffolgenden Kind-Elemente. Seien es Listen, weitere Anker und der Gleichen.
Hallo, Dazu müsste man deinen Quelltext Sehen. Kannst du einen Screenshot posten oder einen Link senden?
Ohne Quelltext oder besser einen Link zur Seite kann man deiner Beschreibung inkl. Screenshot leider nicht folgen und somit deine Frage kaum beantworten.
Kannst du mal den Code direkt, via http://codepen.io oder http://pastebin.com hier reinstellen, da ich wie die anderen auch rätsele, wie der nun im einzelnen aussieht?
Eigentlich reicht es, die buttons als Links zu machen. Wozu brauchst du den Link außen herum?
Wenn du mehr als nur die Buttons verlinken willst und bei den Buttons vielleicht auch statt a-Tags button-Tags verwenden möchtest, könntest du die Aktionen, die beim Klick passieren mithilfe eines click-Events steuern.
Beispiel in jQuery:
$('button#fachuebersicht').click(function() {
window.location.href = '/fachuebersicht.html';
//oder:
window.location.href = '?page=fachuebersicht';
});
$('button#faecherverwaltung').click(function() {
//oder:
showFaecherverwaltung();
//oder:
$('.menu').hide();
$('section#facherverwaltung').show();
});
$('button#notenansicht').click(function() {
//...
});
Lasse dir dazu eine andere Lösung einfallen. Das, was du planst, ist extrem unschön.
Trenne die einzelnen Buttons von ihrem derzeitigen Vaterelement (setze sie also separat als Nachbarelemente zum div o.ä.). Die Positionierung kannst du via CSS (mit absoluter Positionierung bspw.) lösen.