In the navbar example on the bootstrap site, I would like to programmatically make one of the Navbar items (let's say the About link) disabled/unclickable.
I've tried .addClass('disabled'), .removeClass('active'), but nothing seems to work.
Am I missing something simple?
If you want to make a click on a menu item not do anything, you can use the following jQuery syntax to disable its effect:
$(/* jQuery selector for menu item */).click(function(e) {
e.preventDefault();
});
Then you can style the button with a "disabled" or gray color if you desire, so that the user knows it is unclickable. This solution is compatible with all browsers that support jQuery.
Here is a JSFiddle demo of this solution (thanks to @Adjit in the comments!): http://jsfiddle.net/7a2p8jjn/1/
just add class .disabled
<li class="disabled"><a href="#about">About</a></li>
and then in your javascript
$(document).ready(function() {
$(".nav li.disabled").click(function() { return false; });
});
of course you can add a class disabled to the item with jQuery addClass method also
You can just add pointer-events: none
as the style of the element. Example with jquery:
$('.navbar-nav').find('a[href=#about]').css('pointer-events', 'none')
ps: as @maximillian-laumeister said this solution is not compatible with IE10 and earlier .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.