title: jquery:how linking the menubar to tabs
body: <p>I have a menubar and tabs the code like below:</p>
  
  <pre><code>    &lt;div id="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Inspection&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;show tabs1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;show tabs2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
      &lt;/div&gt;    
  
      &lt;div id="tabs"&gt;
            &lt;ul&gt;
                 &lt;li&gt;&lt;a href="#tabs1"&gt;Inspection Report&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#tabs2"&gt;Input Data&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;div id="tabs1"&gt;
             bla bla bla
        &lt;/div&gt;
        &lt;div id="tabs2"&gt;
             blah blah blah
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>i have use this code below for selected tabs.
  but after i have clicked <code>show tabs1</code>, actually show <code>tabs2</code>:</p>
  
  <pre><code>&lt;script&gt;
        $(document).ready(function(){
                $("#Tabs").tabs();
                $("#menu ul li a").each(function(index){
                          $(this).click(function(){
                                    $("#Tabs").tabs("select",index);
                                    });
                           });
               });
  &lt;/script&gt;
  </code></pre>