web-dev-qa-db-fra.com

Comment puis-je désactiver un élément LI spécifique dans une UL?

J'ai un menu qui est un <ul>. Chaque élément de menu est un <li> et est actuellement cliquable . Selon certaines conditions, je souhaite désactiver (le rendre non cliquable) un élément <li> particulier . Comment puis-je obtenir cela? J'ai aussi essayé d'utiliser l'attribut disabled sur <li> et list-style:none. Ni travaillé. Aucune suggestion?

javascriptcsshtml-listslistitem
17
user811433

Si vous souhaitez toujours afficher l'élément mais ne le rendre pas cliquable et avoir l'air désactivé avec CSS:

CSS:

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

HTML:

<li class="disabled">Disabled List Item</li>

De plus, si vous utilisez BootStrap, une classe appelée désactivée à cette fin existe déjà. Voir cet exemple .

64
Tony L.

J'utilise habituellement <li> pour inclure le lien <a>. Je désactive l'écriture de l'action de clic comme ceci: Vous ne pouvez pas inclure le lien <a>, vous ignorerez alors mon post.

a.noclick       {
  pointer-events: none;
}
<a class="noclick" href="#">this is disabled</a>

2
Ishihara

Utilisation de CSS3: http://www.w3schools.com/cssref/sel_nth-child.asp

Si ce n'est pas une option pour une raison quelconque, vous pouvez essayer de donner les classes d'éléments de liste:

<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
...
</ul>

Puis dans votre css:

li.one{display:none}/*hide first li*/
li.three{display:none}/*hide third li*/
1
gaynorvader

Utilisation de JQuery: http://api.jquery.com/hide/

$('li.two').hide()

Dans :

<ul class="lul">
    <li class="one">a</li>
    <li class="two">b</li>
    <li class="three">c</li>
</ul>

Sur document prêt.

http://jsfiddle.net/2dDSG/

0
Mibou