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

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;
}

#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.

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.

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.

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>

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

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

Folgendes scheint zu funktionieren:

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}

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();
});

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

Anchor href Link gelten für li:

#menu li a {
       display:block;
    }

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.

a {
  display: block;
  position: relative;
}

Ich denke das ist alles was du brauchst.

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.

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

<a href="#"><li>Something1</li></a>

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;
        });
    });
});