html tabs não funcionam

<script src="jquery.ui.tabs.js"></script>
   <script>
           $(function() {
                   $( "#tabs" ).tabs();
           });
   </script>
</head>
(...)


<style type="text/css">

body {
   background-color: #eef;     
}
#tabs {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
}

</style>



<div id="tabs">
        <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
                <li><a href="#tabs-3">Tab 3</a></li>
        </ul>
        <div id="tabs-1">
                <p>Content for Tab 1</p>
        </div>
        <div id="tabs-2">
                <p>Content for Tab 2</p>
        </div>
        <div id="tabs-3">
                <p>Content for Tab 3</p>
        </div>
</div>



                </center>

</div>

</body></html>