JQuery TabData

Question

Dear All

   I have designing the TabMenu Like following


         <script type="text/javascript">
         $(function() {
           $('#container-1').tabs();
           $('#container-2').tabs();
         }
         </script>

         .....
          <div id="container-1">
            <ul>
            <li><a href="#fragment-1"><span id="start">First</span></a></li>
            </ul>
          </div>
           <div id="container-2">
            <ul>
            <li><a href="#fragment-1"><span id="end">Last</span></a></li>
            </ul>
          </div>

        ...

Is it Possible to get the ClickedTab data, instead index.Like if ClickTab is First then #fragment1 else if ClickTab is Last #fragment2. please help this doubt.

Answer 1

Can you clarify what you mean?

If you change this:

<li><a href="#fragment-1"><span id="end">Last</span></a></li>

to:

<li><a href="#fragment-2"><span id="end">Last</span></a></li>

Then it will load #fragment-2 when you click it.

If you actually want to get the data of the clicked tab, then you can hook into the tabsselect event

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
//ui.panel is a dom element that contains the contents of the clicked tab.
}

Further reading available at the Jquery UI docs

Answer 2

I hope this means you got the other part working. Building on the previous example this is possible:

  $(document).ready(function() {
      $('#container-1').tabs({
          selected : function(e, ui) {
            if ($($("a", e.target).get(ui.index)).attr('href') == '#fragment-1') {
                alert('First clicked!');
            }
          }        
      }); 
  });
   ....
  <div  id="container-1">
        <ul>
            <li><a href="#fragment-1"><span>Home</span></a></li>
            <li><a href="#fragment-2"><span>Contact</span></a></li>

         </ul>
  </div>

Ultimately it is probably better to use index since this requires you to know a bit of the tab implementation details and you can use a switch to handle the logic for each tab. However, if you feel that the content suits your needs better, than this should work just fine.