web-dev-qa-db-ja.com

UL内の特定のLI要素を無効にするにはどうすればよいですか？

<ul>というメニューがあります。各メニュー項目は<li>であり、現在クリック可能です。いくつかの条件に基づいて、特定の<li>要素を無効にします（クリックできないようにします）。どうすればこれを達成できますか？ <li>およびlist-style:noneでもdisabled属性を使用してみました。どちらも機能しませんでした。助言がありますか？

javascriptcsshtml-listslistitem
23
user811433

それでもアイテムを表示したいが、クリックできないようにし、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>

また、BootStrapを使用している場合、この目的のために既にdisabledというクラスがあります。 この例を参照 。

75
Tony L.

私は通常<li>リンクを含めるために<a>を使用します。このようなクリックアクションの書き込みを無効にしました。 <a>リンクを含めない場合、私の投稿は無視されます。

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

JQueryの使用： http://api.jquery.com/hide/

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

で：

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

ドキュメントの準備ができました。

http://jsfiddle.net/2dDSG/

0
Mibou

CSS3の使用： http://www.w3schools.com/cssref/sel_nth-child.asp

それが何らかの理由でオプションではない場合、リスト項目クラスを与えることを試みることができます：

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

次に、CSSで：

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