it-swarm.com.de

Wie kann ich den HTML-Link durch Klicken auf <li> aktivieren?

Ich habe folgendes 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>

Der <li> ist etwas groß, mit einem kleinen Bild auf der linken Seite Ich muss tatsächlich auf den <a> klicken, um den Link zu aktivieren. Wie kann ich auf den <li> klicken, um den Link zu aktivieren?

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;
}
55
San
#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

Möglicherweise müssen Sie einige Einstellungen für IE6 vornehmen, aber wie Sie es tun.

107
MiffTheFox

Wie Marineio gesagt hat, können Sie das onclick-Attribut des <li> verwenden, um location.href über Javascript zu ändern:

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

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

16
Eric

Nur um diese Option 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. Dadurch wird das Listenelement selbst zu einem Hyperlink (ähnlich wie man ein Bild zu einem Link macht).
Für das Styling wende ich normalerweise Folgendes an:

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

Ich kann dann jedes beliebige 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 um sie herum ausrichten, sollte dies gut funktionieren.

15
Duncan

Fügen Sie einfach den Link-Text in ein "p" -Tag oder etwas ä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.

<li> <a href="#"> <p>Link Text </p> </a> </li>
9
Adam

Das ganze <li>-Objekt wird als Link erstellt: 

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

jquery Dies ist eine andere Version mit jquery, die etwas weniger kürzer ist als das _<a>-Element innerhalb des <li>-Elements

$(li).click(function(){
    $(this).children().click();
});
2
Mijail

Folgendes scheint zu funktionieren:

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

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

<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ändig anklickbarer <li> erstellt und die Formatierung bleibt auf Ihrem echten Link Dies kann auch für den <div>-Tag nützlich sein

1
MrFlo

Anker href link gelten für li:

#menu li a {
       display:block;
    }
0
K.H. Hirok

Ich habe eine einfache Lösung gefunden: Lassen Sie das Tag "li" innerhalb des Tags "a" sein:

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

Sie könnten ein "onclick" -Ereignis im LI-Tag versuchen und die "location.href" wie in Javascript ändern.

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

0
Marineio