Question

I have a menubar and tabs the code like below:

    <div id="menu">
        <ul>
            <li><a href="#"><span>Inspection</span></a></li>
            <ul>
                <li><a href="#"><span>show tabs1</span></a></li>
                <li><a href="#"><span>show tabs2</span></a></li>
            </ul>
        </ul>
    </div>    

    <div id="tabs">
          <ul>
               <li><a href="#tabs1">Inspection Report</a></li>
               <li><a href="#tabs2">Input Data</a></li>
          </ul>
      <div id="tabs1">
           bla bla bla
      </div>
      <div id="tabs2">
           blah blah blah
      </div>
   </div>

i have use this code below for selected tabs.
but after i have clicked show tabs1, actually show tabs2:

<script>
      $(document).ready(function(){
              $("#Tabs").tabs();
              $("#menu ul li a").each(function(index){
                        $(this).click(function(){
                                  $("#Tabs").tabs("select",index);
                                  });
                         });
             });
</script>

Answer 1

Now that you finally have provided enough information, it’s easier to help you…

Edit your javascript to the following, it still uses the select method of jQuery tabs

$(function() {
    $("#tabs").tabs();
    $("#menu a:not(:first)").each(function(index){
        $(this).click(function() {
            $("#tabs").tabs("select",index);
            return false;
        });
    });
});

Demo: http://jsfiddle.net/LdDGG

---

Alternatively, if you plan on adding more a elements into your #menu, you should add IDs to either the a elements or the ul, like in this demo: http://jsfiddle.net/LdDGG/1/