it-swarm.dev

Wie kann ich ein bestimmtes LI-Element in einem UL deaktivieren?

Ich habe ein Menü, das ein <ul> ist. Jeder Menüpunkt ist ein <li> und derzeit anklickbar . Unter bestimmten Umständen möchte ich ein bestimmtes <li>-Element ..__ deaktivieren (nicht anklickbar machen). Ich habe auch versucht, das disabled-Attribut für <li> und list-style:none zu verwenden. Weder funktionierte. Irgendwelche Vorschläge?

17
user811433

Wenn Sie das Element weiterhin anzeigen möchten, es jedoch nicht anklickbar machen und mit CSS deaktiviert aussehen:

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>

Wenn Sie BootStrap verwenden, haben sie bereits eine Klasse, die für diesen Zweck als deaktiviert bezeichnet wird. Siehe dieses Beispiel .

64
Tony L.

Normalerweise verwende ich <li>, um <a> link aufzunehmen. Ich deaktiviere das Schreiben von Klickaktionen wie folgt; Sie dürfen keinen <a>-Link einfügen, dann ignorieren Sie meinen Beitrag.

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

2
Ishihara

Verwendung von CSS3: http://www.w3schools.com/cssref/sel_nth-child.asp

Wenn dies aus irgendeinem Grund keine Option ist, können Sie versuchen, den Listenelementeklassen Klassen zuzuweisen:

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

Dann in deiner CSS:

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

Verwendung von JQuery: http://api.jquery.com/hide/

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

Im :

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

Auf dem Dokument fertig.

http://jsfiddle.net/2dDSG/

0
Mibou