jquery - Disable some easytabs -

jquery - Disable some easytabs -

i want disable easytabs, have found no way of preventing user come in disabled tabs. how can that?

this tab set looks like:

when press button disable b & c, set style "disabled" on 2 tabs , seek homecoming false upon mouse clicks on them. disabled appeareance want:

but tabs can still selected.

why?

i have tried command clicks on both li , a.

http://jsfiddle.net/8vkf8/

html:

<div id="tab-container" class="tab-container"> <ul class="etabs"> <li class="tab"><a href="#a">a</a></li> <li class="tab"><a href="#b">b</a></li> <li class="tab"><a href="#c">c</a></li> <li class="tab"><a href="#d">d</a></li> </ul> <div class="panel-container"> <div id="a"> 1st page </div> <div id="b"> 2nd page </div> <div id="c"> 3rd page </div> <div id="d"> 4th page </div> </div> </div> <button onclick="on_disable_b_and_c_clicked()">disable b &amp; c</button> <button onclick="enable_all()">enable</button>

js:

$(function() { var tabs = $('#tab-container'); tabs.easytabs({ animate: false }); }); function on_disable_b_and_c_clicked() { var tabs = $('#tab-container'); disable_easytabs(tabs, [1,2]); homecoming false; } function enable_all() { var tabs = $('#tab-container'); disable_easytabs(tabs, []); } function disable_easytabs(tabs, indexes) { var lis = tabs.children('ul').children(); var index = 0; lis.each(function() { var li = $(this); var = li.children('a'); var disabled = $.inarray(index, indexes) != -1; if (disabled) { li.addclass('disabled'); li.on("click", returnfalse); } else { li.removeclass('disabled'); li.off('click', returnfalse); } index++; }); } function returnfalse(e) { homecoming false; }

css:

.etabs { margin: 0; padding: 0; } .tab { top: 1px; padding: 6px 10px; display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; } .tab { text-decoration: none; display: block; padding: 0 10px; outline: none; } .tab a:hover { text-decoration: none; } .tab.active { background: #fff; padding-top: 6px; position: relative; border-color: #666; } .tab a.active { text-decoration: none; } .tab-container .panel-container { height: 140px; background: #fff; border: solid #666 1px; padding: 10px; } { color: #000; } ul.etabs li.disabled { color: #aaa; cursor: default; }

easytabs provides before click event, can bind see if disabled class nowadays , homecoming false in handler stop tab selection:

tabs.bind("easytabs:before", function (e, clicked) { if(clicked.parent().hasclass('disabled')) { homecoming false; } });

i forked fiddle in place, , took out unnecessary .on('click') handlers:

http://jsfiddle.net/aa8z3/

jquery