Can't disable a tab in tabs list using javascript\jquery

Question

I have a .cshtml file which contains this code:

<ul id="tabcont1-nav" class="tabnav">
    <li id="t1"><a href="#tab1"><span>A   </span></a></li>
    <li id="t2"><a href="#tab2"><span>B   </span></a></li>
    <li id="t3"><a href="#tab3"><span>C   </span></a></li>
    <li id="t4"><a href="#tab4"><span>D   </span></a></li>
    <li id="t5"><a href="#tab5"><span>E   </span></a></li>
    <li id="t6"><a href="#tab6"><span>F   </span></a></li>
</ul>

and after there is the tabs code..for example:

div id="tab1" class="tab"

etc.

I would like to disable tab2, tab5 and tab6 (i would like that by clicking on them..nothing happens).

I've tried (reading on stackoverflow) doing this:

<script>
    $(document).ready(function() {
        document.getElementById("t2").childNodes[0].onclick = function() {return false;};​
    });
<script>

but i have an error of invaling character during run. I've tried using also jquery..but it's the same. What can i do?

Answer 1

Assuming clicking currently takes the user to a different page, with jQuery you can simply:

$('#t2 > a').on('click', function(event) {
    event.preventDefault();
});

Answer 2

have you tried (assuming using Jquery UI tabs ) ??

  $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).

if not use

e.preventDefault();

Answer 3

Try to use e.preventDefault() to prevent default behavior of your anchor:

$('#t2, #t5, #t6').on('click', 'a', function(e) {
    e.preventDefault();
});