Problem with jquery ui tabs

I am currently learning jquery ui tabs and included following things MY index file

<!DOCTYPE HTML>
<html lang="en"><head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>jQuery UI Tabs - Open on mouseover</title>
    <link type="text/css" href="mouseover_files/jquery.css" 
rel="stylesheet">
    <script type="text/javascript" src="mouseover_files/jquery-1.js"></script>
    <script type="text/javascript" src="mouseover_files/jquery.js"></script>
    <script type="text/javascript" src="mouseover_files/jquery_002.js"></script>
    <script type="text/javascript" src="mouseover_files/jquery_003.js"></script>
    <link type="text/css" href="mouseover_files/demos.css" rel="stylesheet">
    <script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
            event: 'mouseover'
        });
    });
    </script>
</head><body>

<div class="demo">

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix 
ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"><a href="#tabs-1">Nepal</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">England</a></li>
        <li class="ui-state-default ui-corner-top ui-tabs-selected 
ui-state-active"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom 
ui-tabs-hide" id="tabs-1">
        <p>Dhapasi-3,Kathmandu.<br/>
            Tel:+977(0)1 4371535<br>
                +977(0)1 4375259<br>
                Fax:+977(0)1 4371535<br>
                P.O.Box : 13139<br>
                [email protected]        
        </p>
    </div>
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom 
ui-tabs-hide" id="tabs-2">
        <p>1 Field Terrace,<br> 
            Bath Road,Worcester WR5 3BN<br>
            Tel:+44(0)1905 356776<br>
            Fax:+44(0)1905 356776<br>
            [email protected]
        </p>
    </div>
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" 
id="tabs-3">
        <p>this is the content for third tab</p>
    </div>
</div>

</div>
</body></html>

When i remove the third tab the whole tab stops working and again when i undo it the tab starts working.please help me what could be the problem.

ansaurus

tags:

views:

answers:

Problem with jquery ui tabs

related questions