Following are my php and Jquery scripts. The contents of external php files are loading outside the box (shown in pic). I want the contents to load right below the tabs. Could anyone hint me the solution please... 

Please give a look to it :
html script

<!doctype html>
<meta charset="utf-8" />
<link rel  = "stylesheet" type="text/css" href = "style.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.css" >

<div id = "top_menu">
<li><a href = "Mumbai.php">Mumbai</a></li>
<li><a href = "Banglore.php">Banglore</a></li>
<li><a href = "india.php">India</a></li>
<li><a href = "Delhi.php">Delhi</a></li>
<li><a href = "Chandigarh.php">Chandigarh</a></li>
<li><a href = "Kerela.php">Kerela</a></li>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="input.js"></script>


Jquery script:

ajaxOptions: {
error: function(xhr, index, status, anchor)
$(anchor.hash).text('Could not load page.')
} });