CODEWITHSUNDEEP
javascriptjqueryhtml
Steven Barrett
Steven Barrett

Reputation: 321

onclick event for jquery tabs

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>

Upvotes: 1

Views: 18528

Answers (1)

Suresh Atta
Suresh Atta

Reputation: 121998

See API 

beforeActivate( event, ui )

Triggered immediately before a tab is activated. 

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

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

Upvotes: 4

Related Questions