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;
}
Wie Marineio sagte, könnten Sie das
onclick
Attribut von verwenden<li>
, um eslocation.href
durch 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.quelle
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.
quelle
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>
quelle
<span>
und die Anzeige auf Block eingestellt. Span schien nur korrekter als ein Absatz. So oder so hat es gut funktioniert.Dadurch wird das gesamte
<li>
Objekt als Link erstellt:<li onclick="location.href='page.html';" style="cursor:pointer;">...</li>
quelle
Folgendes scheint zu funktionieren:
ul#menu li a { color:#696969; display:block; font-weight:bold; line-height:2.8; text-decoration:none; width:100%; }
quelle
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(); });
quelle
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 seinquelle
Anchor href Link gelten für li:
#menu li a { display:block; }
quelle
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.
quelle
a { display: block; position: relative; }
Ich denke das ist alles was du brauchst.
quelle
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.
quelle
Ich habe eine einfache Lösung gefunden: Stellen Sie das Tag "li" in das Tag "a":
<a href="#"><li>Something1</li></a>
quelle
<ul>
ist<li>
.<a>
muss drinnen sein<li>
. w3c.github.io/html-reference/ul.htmlVerwenden 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; }); }); });
quelle