loading default tab via anchor

When the content divs aren't in the exact same order as the tabs order, it will select the proper tab, but load the content based by index I suppose.

For example:

<script type="text/javascript">
    $(document).ready(function() 
    {   
        $('#container-1 > ul').tabs();

    });

</script>

<div id="container-1">
        <ul>
            <li><a href="#1"><span>tab 1</span></a></li>
            <li><a href="#2"><span>tab 2</span></a></li>
            <li><a href="#3"><span>tab 3</span></a></li> 
        </ul>

        <div id="1">
              <span>tab 1 content</span>
        </div>

        <div id="3">
              <span>tab 3 content</span>
        </div>

        <div id="2">
              <span>tab 2 content</span>
        </div>
</div>

index.php#3 will select the #3 tab, but load the content for #2.

I'm sure someone is going to ask why I don't just put the content in the same order... I need to adjust the content for SEO purposes.