Change Tabs by cliking a link inside a Tab

by Akram kamal

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">ONE</a></li>
    <li><a href="#tabs-2">TWO</a></li>
    <li><a href="#tabs-3">and THREE</a></li>
  </ul>
  <div id="tabs-1">
    <p>This is TAB 1, now is the time.</p>
    <p><a href="#tabs-3">I
               want to open tab 3</a></p>
  </div>
  <div id="tabs-2">
    <p>This is TAB 2, now is the time.</p>
    <p><a href="#tabs-2">I
               want to open tab 2</a></p>
  </div>
  <div id="tabs-3">
    <p>This is TAB 3, now is the time.</p>
    <p><a href="#tabs-1">I
               want to open tab 1</a></p>
  </div>
</div>

JavaScript

$(document).ready(function() {
  $('#tabs').tabs(); // first tab selected
  $("#tabs>div a[href^='#']").click(function() {
    var index = $($(this).attr("href")).index() - 1
    $("#tabs").tabs("option", "active", index);
    return false
  })
})