Question

I am using the following HTML on my page:

<ul id="tabnav">

        <li id="tab_a" class="tab1"><a href="tab1.htm">Tab a</a></li>
        <li id="tab_b" class="tab2"><a href="tab2.htm">Tab b</a></li>
        <li id="tab_c" class="tab3"><a href="tab3.htm">Tab c</a></li>
    </ul>

What I am trying to do is make it so that you can’t click on the 3rd tab using javascript then I want to be able to click on the 3rd tab at a later time.

So I have tried using the following JavaScript in a JavaScript function:

document.getElementById("tab_c").style.enabled = false;

however it didn’t seem to work.

I was hoping that it would make it disabled so you can’t click on it.

Am I doing something wrong?

Answer 1

You can add an onclick handler to the link that returns false.

document.getElementById("tab_c").childNodes[0].onclick = function() {return false;};​

The childNodes[0] just selects the first child which in this case is the <a>

E.g. http://jsfiddle.net/zYSeF/