title: on click generate anew tab using jquery
body: <p>there is link on first tab and when i click on that link it should generate a new tab and focus should gone to that tab.there is a problem the tab is generated but the focus is not going to that tab can anybody help me plz.</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="./compo.css"/&gt;
  &lt;script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="tabs-2.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;title&gt;"Tab sheet 2" demo &amp;mdash; Component Library&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
          function displaydetails() {
              document.getElementById("tab2").style.display = "";
  
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="COMPO"&gt;
  &lt;!-- Wrapper --&gt;
  &lt;div id="wrapper"&gt;
      &lt;!-- Container --&gt;
      &lt;div id="container" class="resolution_800x600"&gt;
          &lt;!-- tabpanel_customer_data --&gt;
          &lt;div id="tabpanel-demo" class="tab_panel_2 clear"&gt;
              &lt;ul id="tabpanel-liste" class="tab_menu clear"&gt;
                  &lt;li id="tab1" class="tabpanel-tabbar-item tab_active"&gt;&lt;a href="#content01" class="tabpanel-tabbar-link"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li  id="tab2" class="tabpanel-tabbar-item" style="display:none"&gt;&lt;a href="#content02" class="tabpanel-tabbar-link" &gt;Tab 2&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
              &lt;!-- Tab_content 01 --&gt;
              &lt;div id="content01" class="tab_panel_content_2"&gt;
                  &lt;h3 class="title_n2" id="tab-1"&gt;tab 1&lt;/h3&gt;
                  &lt;div class="texts"&gt;
                      &lt;p&gt;
                          &lt;a href="#" onclick="displaydetails()"&gt;click me &lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;!-- /bloc_consultation --&gt;             
              &lt;/div&gt;
              &lt;!-- /Tab_content 01 --&gt;
              &lt;!-- Tab_content 02 --&gt;
              &lt;div id="content02" class="tab_panel_content_2"&gt;
                  &lt;h3 class="title_n2" id="tab-2"&gt;tab 2&lt;/h3&gt;
                  &lt;div class="texts"&gt;
                      &lt;p&gt;
                          Content of the 2nd tab
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;!-- /bloc_consultation --&gt;     
              &lt;/div&gt;
              &lt;!-- /Tab_content 02 --&gt;
  
          &lt;/div&gt;
          &lt;!-- /tabpanel_customer_data --&gt;                
      &lt;/div&gt;
      &lt;!-- /Container --&gt;
  &lt;/div&gt;
  &lt;!-- /Wrapper --&gt;   
  </code></pre>
  
  <p>js  </p>
  
  <pre><code>var hideClass = "hide";
  var tabClass = "tab_panel_2";
  var activeClass = "tab_active";
  var itemClass   = "tabpanel-tabbar-item";
  var linkClass   = "tabpanel-tabbar-link";
  var panelClass  = "tab_panel_content_2";
  var spanClass   = "span_tab";
  
  $(document).ready(function() {
      $("."+panelClass).addClass(hideClass);
  
      $("div."+tabClass+" ul li."+itemClass).each(function() {
          var link = $(this).children("a");
          $(this).append("&lt;span class=\""+spanClass+"\"&gt;"+link.html()+"&lt;/span&gt;");
          $(this).children("span."+spanClass).hide();
      });
  
  
      $("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
          $("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
          $(this).hide();
          $(this).siblings("span."+spanClass).show();
      });
  
  
      $("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
          $(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);
  
          $(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
          $(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();
  
          $("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
          $(this).hide();
          $(this).siblings("span."+spanClass).show();
          return false;
      });
  });
  </code></pre>