Change Tabs by cliking a link inside a Tab

Change Tabs by cliking a link inside a Tab

This is an awesome place. I have the following code but it does not work - does not change the tabs when you click on the links embedded in these tabs. Hot sure why this does not work - please let me know why you think it might not be working.. 

  1. <!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Tabs</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script id="demo" type="text/javascript">
$(document).ready(function() {
    var tabs = $("#tabs").tabs();

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

    $('#my-text-link1').click(function() { // bind click event to link
        $tabs.tabs('select', 0); // switch to 1st tab
        return false;
    })
    $('#my-text-link2').click(function() { // bind click event to link
        $tabs.tabs('select', 1); // switch to 2nd tab
        return false;
    })
    $('#my-text-link3').click(function() { // bind click event to link
        $tabs.tabs('select', 2); // switch to third tab
        return false;
    })   
});
</script>   



</head>
<body>
<div class="demo">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">ONE</a></li>
        <li><a href="#tabs-2">TWO</a></li>
        <li><a href="#tabs-3">and THREE</a></li>
    </ul>
    <div id="tabs-1">
        <p>This is TAB 1, now is the time.</p>
        <p><a href="#tabs-3" id="my-text-link5">I
               want to open tab 3</a></p>
    </div>
    <div id="tabs-2">
        <p>This is TAB 2, now is the time.</p>
        <p><a href="#tabs-2" id="my-text-link6">I
               want to open tab 2</a></p>
    </div>
    <div id="tabs-3">
        <p>This is TAB 3, now is the time.</p>
        <p><a href="#tabs-1" id="my-text-link4">I
               want to open tab 1</a></p>
    </div>
</div>
</div><!-- End demo --><!-- End demo-description -->
</body>
</html>