Wie kann ich den HTML-Link aktivieren, indem ich auf <li> klicke?

73

Ich habe das folgende Markup:

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

Das <li>ist ein bisschen groß, mit einem kleinen Bild links, ich muss tatsächlich auf das klicken <a>, um den Link zu aktivieren. Wie kann ich auf <li>den Link klicken klicken ?

Edit1:

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}
San
quelle

Antworten:

121
#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

Möglicherweise muss der IE6 angepasst werden, aber so machen Sie es.

MiffTheFox
quelle
1
So würde ich es machen. Der Link wird auf die Größe des <li> -Tags erweitert.
Austin Hyde
Es funktioniert, aber der Text (Link) bleibt am rechten Rand hängen, als ich ein Auffüllrecht gab: .5em das <a> geht aus <li>
San
Wenn Sie weiter optimieren, wird es perfekt aussehen. Überprüfen Sie, ob negative Ränder und Auffüllungen vorhanden sind. Wahrscheinlich stimmt etwas nicht und es kollabiert. Stellen Sie außerdem sicher, dass Sie keine fehlerhafte Textausrichtung haben: rechts; dort drin stecken.
Curtis Tasker
Ich habe dem Text (Link) eine rechte Auffüllung gegeben, indem ich der <li> tatsächlich eine Auffüllung gegeben habe: 0.5em und die <li> und <a> die gleiche Hintergrundfarbe haben. Aber jetzt, da .5em rechter Teil von <li> nicht klickfähig ist, ist das in Ordnung.
San
San: Dieses Problem wurde behoben, indem die Polsterung intelligent auf dem Link selbst platziert wurde: li {padding-top: .3em; Polsterung unten: .3em; a {display: block; Rand: 0px; Polsterung links: 10%; Breite: 90%; Höhe: 100%; }}
Ari Gesher
21

Wie Marineio sagte, könnten Sie das onclickAttribut von verwenden <li>, um es location.hrefdurch Javascript zu ändern :

<li onclick="location.href='http://example';"> ... </li>

Alternativ können Sie alle Ränder oder Auffüllungen in der entfernen <li>und eine große Auffüllung auf der linken Seite der hinzufügen <a>, um zu vermeiden, dass Text über das Aufzählungszeichen geht.

Eric
quelle
1
Können Sie das erweitern? Warum ist es eine schlechte Idee
NuclearPeon
14

Nur um diese Option da draußen zu werfen:

<ul id="menu">
    <a href="#"><li>Something1</li></a>
    <a href="#"><li>Something2</li></a>
    <a href="#"><li>Something3</li></a>
    <a href="#"><li>Something4</li></a>
</ul>

Dies ist der Stil, den ich in meinen Menüs verwende. Er macht das Listenelement selbst zu einem Hyperlink (ähnlich wie man ein Bild zu einem Link machen würde).
Für das Styling wende ich normalerweise so etwas an:

nav ul a {
    color: inherit;
    text-decoration: none;
}

Ich kann dann das gewünschte Styling auf das gewünschte <li> anwenden.

Hinweis: Validatoren werden sich über diese Methode beschweren, aber wenn Sie wie ich sind und Ihr Leben nicht auf sie stützen, sollte dies gut funktionieren.

Duncan
quelle
1
Die Kinder (direkte Nachkommen) eines ul-Elements müssen alle li-Elemente sein. Dies ist eine rein syntaktische Anforderung. gemäß korrekter Semantik für ul in ul - diese Antwort führt zu ungültigem HTML
EGC
1
Ein wilder Validator ist erschienen. :)
Duncan
12

Fügen Sie einfach den Linktext in ein 'p'-Tag oder ähnliches ein und fügen Sie diesem Element Rand und Abstand hinzu. Auf diese Weise werden die Einstellungen, die MiffTheFox Ihnen gegeben hat, nicht beeinflusst, d. H.

<li> <a href="#"> <p>Link Text </p> </a> </li>
Adam
quelle
Dieser war eigentlich der beste für mich. Ich habe a verwendet <span>und die Anzeige auf Block eingestellt. Span schien nur korrekter als ein Absatz. So oder so hat es gut funktioniert.
Sturm Müller
7

Dadurch wird das gesamte <li>Objekt als Link erstellt:

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>
DejanR
quelle
1

Folgendes scheint zu funktionieren:

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}
Sinan Ünür
quelle
1

jqyery dies ist eine andere version mit jquery etwas weniger kürzer. Angenommen, das <a>Element befindet sich innerhalb des <li>Elements

$(li).click(function(){
    $(this).children().click();
});
Mijail
quelle
1
Dies löst eine Endlosschleife aus. Seit dem Klicken auf das Kind-> klickt auch das Elternteil.
Rocky Kev
1

Oder Sie können einen leeren Link am Ende Ihres <li>:

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

Dadurch wird ein vollständiger Klick erstellt <li>und Ihre Formatierung bleibt auf Ihrem echten Link erhalten. Es könnte auch für <div>Tags nützlich sein

MrFlo
quelle
1

Anchor href Link gelten für li:

#menu li a {
       display:block;
    }
Khandoker Hirok
quelle
0

Sie können ein "onclick" -Ereignis innerhalb des LI-Tags versuchen und die "location.href" wie in Javascript ändern.

Sie können auch versuchen, die li-Tags in den a-Tags zu platzieren. Dies ist jedoch wahrscheinlich kein gültiger HTML-Code.

Marineio
quelle
Nach meiner Erfahrung führt das Fälschen von Links über Javascript fast immer zu einer schlechten Benutzererfahrung.
Chuck
Es ist nur eine Option für ihn, schließlich ist es seine Website. Und er könnte den normalen <a> -Link dort behalten, und er würde normal funktionieren, selbst wenn Javascript deaktiviert wäre (nur nicht, wenn auf das Li geklickt würde).
Marineio
0
a {
  display: block;
  position: relative;
}

Ich denke das ist alles was du brauchst.

Abaas Fähigkeiten
quelle
-1

Wie kann ich den HTML-Link aktivieren, indem ich auf <li> klicke?

Indem Sie Ihren Link so groß wie Ihr Li machen, verschieben Sie einfach die Anweisung

display: block;

von li nach a und du bist fertig.

Das ist:

#menu li
{
    /* no more display:block; on list item */

    list-style: none;
    background: #e8eef4 url(arrow.gif) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

#menu li a
{
    display:block; /* moved to link */
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Randnotiz: Sie können "ul" aus Ihren beiden Selektoren entfernen: #menu ist eine ausreichende Anzeige, es sei denn, Sie müssen diesen beiden Regeln Gewicht geben, um andere Anweisungen zu überschreiben.

FelipeAls
quelle
1
Das funktioniert bei mir nicht. Wenn ich die Anzeige des <a> -Links auf "Block" ändere, wird eine andere Linie als der Aufzählungspunkt angezeigt.
Cartbeforehorse
Lassen Sie mich diese Antwort verfeinern ... Das oben erläuterte Verhalten tritt in Firefox und Opera auf, jedoch nicht in Chrome. In Chrome funktioniert es einwandfrei.
Cartbeforehorse
Was ist, wenn Sie die Anzeige beibehalten: Blockieren Sie sowohl li als auch a? Andernfalls stellen Sie Ihr Problem bitte auf eine separate Frage.
FelipeAls
-1

Ich habe eine einfache Lösung gefunden: Stellen Sie das Tag "li" in das Tag "a":

<a href="#"><li>Something1</li></a>
rafaelsimoes85
quelle
2
Dies ist nicht gültig. Das einzige Element, von dem ein Kind sein kann, <ul>ist <li> . <a> muss drinnen sein <li> . w3c.github.io/html-reference/ul.html
Daniel Sixl
Es besteht nicht unbedingt ein Zusammenhang zwischen Gültigkeit und Funktionalität.
Daniel Sixl
-2

Verwenden Sie jQuery, damit Sie kein Inline-Javascript für das <li>Element schreiben müssen :

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
}); 
Ignacio Pascual
quelle