web-dev-qa-db-fra.com

Comment activer le lien HTML en cliquant sur le <li>?

J'ai le balisage suivant,

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

Le <li> est un peu gros, avec une petite image à sa gauche, Je dois cliquer sur le <a> pour activer le lien. Comment puis-je cliquer sur le <li> pour activer le lien?

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

Il faudra peut-être peaufiner IE6, mais c'est à peu près tout.

107
MiffTheFox

Comme Marineio l'a dit, vous pouvez utiliser l'attribut onclick du <li> pour changer location.href, par le biais de javascript:

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

Sinon, vous pouvez supprimer toutes les marges ou les marges dans le <li> et ajouter un grand marges au côté gauche du <a> pour éviter que le texte ne passe au-dessus de la puce.

16
Eric

Juste pour jeter cette option là-bas:

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

C’est le style que j’utilise dans mes menus, l’élément de liste lui-même est un hyperlien (semblable à la façon dont une image serait un lien).
Pour le style, j’applique généralement quelque chose comme ceci:

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

Je peux ensuite appliquer le style que je souhaite au <li>.

Remarque: Les validateurs vont se plaindre de cette méthode, mais si vous êtes comme moi et que vous ne basez pas votre vie sur eux, cela devrait fonctionner correctement.

15
Duncan

Ajoutez simplement le texte du lien dans une balise 'p' ou quelque chose de similaire, et ajoutez une marge et un remplissage à cet élément, de cette manière, cela n'affectera pas les paramètres que MiffTheFox vous a donnés, à savoir.

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

Cela fera un objet <li> entier sous forme de lien: 

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

jquery c'est une autre version avec jquery un peu moins court . en supposant que l'élément <a> est à l'intérieur de l'élément <li>

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

Ce qui suit semble fonctionner:

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

Ou vous pouvez créer un lien vide à la fin de votre <li>: 

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

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

Ceci créera un <li> complet cliquable et conservera votre mise en forme sur votre lien réel ..__ Cela pourrait être utile pour la balise <div>

1
MrFlo

Le lien d'ancrage href s'applique à li:

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

J'ai trouvé une solution simple: placez le tag "li" dans le tag "a":

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

Vous pouvez essayer un événement "onclick" dans la balise LI et modifier le "location.href" comme dans javascript.

Vous pouvez également essayer de placer les balises li dans les balises a, mais ce n'est probablement pas un code HTML valide.

0
Marineio