I have tabs inside tabs. What I wan to do is set a variable to something once a tab is clicked. so if the brush tab is clicked then that var is set to true, if the pencil tab is selected the others are set to false and this is set to true.

Now I assume you must have an on click event attached to the tabs and when clicked it will call a function. My problem is how to put a on click event for each tab?
Her is a live example of what I have done: http://www.taffatech.com/Paint.html

here is my html code for the tabs:

<div id=tabs style= position:absolute; right:20; top: 30; z-index: 1; >

  <ul>

    <li><a href=#tabs-1>Paint</a></li>

    <li><a href=#tabs-2>Shapes</a></li>

    <li><a href=#tabs-3>Save/Submit</a></li>

    <li><a href=#tabs-4>About</a></li>

  </ul>

  <div id=tabs-1>

  <div id=accordion>



    <h3>Brush</h3>

    <div>

    <center>

      <p>Brush Size</p>

    <div id=sliderBrush></div>

    <div id=Total>10</div>



<p id=colorpickerHolder >

                </p>



    </center>

    </div>



    <h3>Pencil</h3>

      <div>

    <center>

      <p>Pencil Size</p>

    <div id=sliderPencil></div>

    <div id=TotalPencil>10</div>



<p id=colorpickerHolderPencil >

                </p>



    </center>

    </div>



    <h3>Eraser</h3>

    <div>

     Coming soon!

    </div>



  </div>

</div>