Select Tab thru text link

Select Tab thru text link

Hello,
 
I'm using jquery-1.3.2.min.js and jquery-ui-1.7.2.custom.min.js in my tabs webpage. There are two things that I'm trying to do but is not working right.
 
1. I need to be able to put a text link inside the tabs to link to another tab inside the same group of tabs. For example: Tab1 <a href Tab3> | Tab2 | Tab3 <a href Tab 2>
 
2. I need to also be able to use a text link from another webpage to link to Tab2.
 
How can I use text links for tabs?
 
My Webpage:
 
  1. <!DOCTYPE html>
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>jQuery UI Tabs Example Page</title>
      <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
      <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
      <script type="text/javascript">
       $(function(){
         
        // Tabs
        $('#tabs').tabs();
        
        
        var $tabs = $('#tabs').tabs(); // first tab selected
        















  2.     $('#my-text-link2').click(function() { // bind click event to link
         $tabs.tabs('select', 1); // switch to second tab     
         return false;
        });
        
        $('#my-text-link3').click(function() { // bind click event to link
         $tabs.tabs('select', 2); // switch to third tab     
         return false;
        });    
       });
      </script>
      <style type="text/css">
       /*demo page css*/
       body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
       .demoHeaders { margin-top: 2em; }
       #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
       #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
       ul#icons {margin: 0; padding: 0;}
       ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
       ul#icons span.ui-icon {float: left; margin: 0 4px;}
      </style> 
     </head>
     <body>
     <h1>jQuery UI Tabs Example!</h1>
     <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">Demo Tabs Eaxmple...</p> 
     
      
      <!-- Tabs -->
      <h2 class="demoHeaders">Tabs</h2>
      <div id="tabs">
       <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
       </ul>
       <div id="tabs-1">Tab 1... <a href="#" id="my-text-link2">Tab 2 Select</a></div>
       <div id="tabs-2">Tab 2...</div>
       <div id="tabs-3">Tab 3...</div>
      </div>
      
      <div><a href="#" id="my-text-link3">Tab 3 Select</a></div>
     </body>
    </html>










































If you need to see the separate javascript code let me know.
 
Thank you for your help,
jfcby