jquery:how linking the menubar to tabs

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(fuction(){
                                  $("#Tabs").tabs("select",index);
                                  });
                         });
             });
</script>

Answer 1

Your question isn't very clear, but maybe the select method is what you're looking for. It does the following:

Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).

Also from the documentation:

[How do I]...select a tab from a text link instead of clicking a tab itself

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
        $tabs.tabs('select', 2); // switch to third tab
        return false;
});

Here's a demo of how it works: http://jsfiddle.net/hP9xb/

Answer 2

We'll call your menu the "tab console" and your main container the "tab pane."

Let's say your tab console's html looks something like this:

<ul id="tab_console">
    <li id="first"><a href="#">My First Page</a></li>
    <li id="second"><a href="#">My Second Page</a></li>
    <li id="third"><a href="#">My Third Page</a></li>
</ul>

... and your tab pane's lookw like this:

<div id="tab_pane">
    <div id="page_first"></div>
    <div id="page_second"></div>
    <div id="page_this"></div>
</div>

You would need to hide the various tab pane contents, so they don't all show at once. You can do this with CSS:

#tab_pane div {display: none;}

Now we need a script to make it all work:

$(document).ready(function(){                    // fires when browser loads your html
    $('#tab_console > li').click(function() {    // fires when a tab is clicked
        $('#tab_pane > div').hide();             // hides all tab contents
        $('#tab_pane > #page_' + $(this).attr('id')).show();   // show the selected tab
    });

    $('#tab_pane > li#page_first').show();     // load your default tab
});

Answer 3

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/