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: .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>

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./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>

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 17, 2013 at 9:15 Steven BarrettSteven Barrett 33122 gold badges66 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

See API

beforeActivate( event, ui ) 

Triggered immediately before a tab is activated.

    $( "#tabs-1" ).on( "tabsbeforeload", function( event, ui ) {
            //control es here when you clicked on tab 1
    } )

http://api.jqueryui./tabs/#event-beforeLoad