Comment faire le lien HTML activé en cliquant sur le bouton <li>?

voix
53

Je 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 grand, avec une petite image sur sa gauche, je dois cliquer sur le fait <a>pour activer le lien. Comment puis - je faire un clic sur l' <li>activation du 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;
}
Créé 13/07/2009 à 21:07
source utilisateur
Dans d'autres langues...                            


13 réponses

voix
103

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

Il peut avoir besoin de quelques ajustements pour IE6, mais c'est sur la façon dont vous le faites.

Créé 13/07/2009 à 21:08
source utilisateur

voix
0

Vous pouvez essayer un événement « onclick » dans la balise LI, et changer le « location.href » comme en javascript.

Vous pouvez également essayer de placer les balises li dans les balises un, mais cela est probablement pas valide HTML.

Créé 13/07/2009 à 21:09
source utilisateur

voix
14

Comme l'a dit Marineio, vous pouvez utiliser l' onclickattribut de la <li>changer location.href, par javascript:

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

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

Créé 13/07/2009 à 21:16
source utilisateur

voix
0

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%;
}
Créé 13/07/2009 à 21:32
source utilisateur

voix
-1

Comment faire le lien HTML activé en cliquant sur le bouton <li>?

En faisant votre lien aussi grand que votre li: il suffit de déplacer l'instruction

display: block;

de li à un et vous avez terminé.

C'est:

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

Note de côté: vous pouvez supprimer « ul » de vos deux sélecteurs: #menu est une indication suffisante, sauf si vous avez besoin pour donner du poids à ces deux règles afin de passer outre d'autres instructions.

Créé 13/07/2009 à 21:42
source utilisateur

voix
7

Cela fera tout <li>objet comme un lien:

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>
Créé 06/11/2011 à 23:54
source utilisateur

voix
9

Il suffit d'ajouter envelopper le texte du lien dans une balise « p » ou quelque chose de similaire et ajouter la marge et le rembourrage à cet élément, de cette façon, il affecte l'habitude les paramètres MiffTheFox vous a donné, à savoir

<li> <a href="#"> <p>Link Text </p> </a> </li>
Créé 20/02/2012 à 17:25
source utilisateur

voix
-2

Utilisez jQuery pour que vous ne devez pas écrire javascript en ligne sur l' <li>élément:

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
}); 
Créé 31/05/2013 à 00:49
source utilisateur

voix
11

Il suffit de 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 je l' utilise dans mes menus, il est l'élément de la liste elle - même un lien hypertexte (similaire à la façon dont on pourrait faire une image un lien).
Pour le style, j'applique habituellement quelque chose comme ceci:

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

Je peux ensuite appliquer quel que soit le style à la balise <li> que je souhaite.

Note: Les valideurs se plaindra de cette méthode, mais si vous êtes comme moi et ne base pas votre vie autour d' eux, cela devrait fonctionner très bien.

Créé 05/07/2013 à 15:03
source utilisateur

voix
2

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

$(li).click(function(){
    $(this).children().click();
});
Créé 16/01/2014 à 03:14
source utilisateur

voix
1

Vous pouvez aussi 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;
}

Cela va créer un cliquable complet <li>et garder votre mise en forme sur votre lien réel. Il pourrait être utile pour <div>étiquette et

Créé 30/08/2014 à 01:01
source utilisateur

voix
0

J'ai trouvé une solution simple: faire la balise « li « être dans la balise » a »:

<a href="#"><li>Something1</li></a>
Créé 27/12/2018 à 22:19
source utilisateur

voix
0

LienAncre href appliquer à li:

#menu li a {
       display:block;
    }
Créé 02/04/2019 à 06:40
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more