Load content in the jquery tab

@{
    ViewBag.Title = "loadingtabsDynamically";
}


    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />

<h2>loadingtabsDynamically</h2>

<div id="div_tab">
    <ul>
        <li>
            <a href="#div_tab1">Tab1</a>
        </li>
        <li>
            <a href="#div_tab2">Tab2</a>
        </li>
        <li>
            <a href="#div_tab3">Tab3</a>
        </li>
    </ul>

    <div id="div_tab1">
        <h1>Inside tab1</h1>
    </div>
    <div id="div_tab2">
        <h1>Inside tab2</h1>
    </div>
    <div id="div_tab3">
        <h1>Inside tab3</h1>
    </div>
</div>

<script type="text/javascript">
    $(function () {

        $('#div_tab').tabs();

    });

    //In the tab select event, get the selected tab
    $("#div_tab").on("tabsselect", function (event, ui) {
        var tabnumber = ui.index;
        var tabName = $(ui.tab).text();

        if (tabName == "Tab1") {
            //make ajax call here to load data dynamically for tab1
            $('#div_tab1').html('<b>tab1 data loaded dynamically</b>');
        }
        else if (tabName == "Tab2") {
            //make ajax call here to load data dynamically for tab2
            $('#div_tab2').html('<b>tab2 data loaded dynamically</b>');
        }
        else if (tabName == "Tab3") {
            //make ajax call here to load data dynamically for tab3
            $('#div_tab3').html('<b>tab3 data loaded dynamically</b>');
        }

    });
</script>

Controller:-

  public ActionResult loadingtabsDynamically()
        {
            return View();
        }