单击时，jquery ui禁用的选项卡带有链接

Question

I just noticed that when I click on the disabled jquery ui tab, it follows the link which I do not want.

The code is like this,

var $tabs = '<div id="layer-tabs">'+
                '<ul>'+
                    '<li><a href="#layer-1"><span>1</span></a></li>'+
                    '<li><a href="#layer-2"><span>2</span></a></li>'+
                    '<li><a href="#layer-3"><span>3</span></a></li>'+
                '</ul>'+
                '<div id="layer-1"> </div>'+
                '<div id="layer-2"> </div>'+
                '<div id="layer-3"> </div>'+
            '</div>';

$( "#tabs-parent" ).append( tabs );

$("#tabs").tabs({ heightStyle: "fill", disabled : [0,1,2] });

Lets say your location is this file:///C:/Users/user/website/index.html, and you click the first diabled tab, it brings you to this, file:///C:/Users/user/website/index.html/#layer-0 . How do I stop this from happening?

Answer 1

只需对带有禁用类的选项卡使用preventDefault即可。