У меня есть меню, которое является <ul>
. Каждый элемент меню <li>
и в настоящее время доступен для клика. Исходя из некоторых условий, я хочу отключить (сделать его не кликабельным) конкретным элементом <li>
. Как я могу это достичь? Я попытался использовать disabled
аттрибут в стиле <li>
и list-style:none
. Ничего не получилось. Какие-либо предложения?
Как я могу отключить определенный элемент LI внутри UL?
Ответ 1
Если вы все еще хотите отобразить элемент, но не можете его использовать и не показывать с помощью 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, у них уже есть класс с отключенным для этой цели. См. Этот пример.
Ответ 2
Обычно я использую <li>
для включения ссылки <a>
. Я отключил действие щелчка мышью так: Вы не можете включить ссылку <a>
, тогда вы проигнорируете мой пост.
a.noclick {
pointer-events: none;
}
<a class="noclick" href="#">this is disabled</a>
Ответ 3
Использование 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*/
Ответ 4
Использование 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>
По готовому документу.