Jquery Ui Tab for displaying view as content in each tab

Jquery Ui Tab for displaying view as content in each tab

I am trying to Jquery UI tabs

How do I go about loading different views as a content for each of the tabs.

Currently I am not doing it the right way but the code snippet is posted below:

Code in the _layout.cshtml is 

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8" />
      <title>@ViewBag.Title - CSTES Application</title>
      <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
      <meta name="viewport" content="width=device-width" />
      
      <script src="/Scripts/jquery.js"></script>
      <script src="/Scripts/jquery-ui.js"></script>

      @Styles.Render("~/Content/css")
      @Styles.Render("~/Content/themes/base/css")

      <script>
          $(function () {
              $("#tabs").tabs();
          });
      </script>
  </head>
<body>
    <div id="header">
        <div class="center">
            <div id="headerContent">
                    <div id="etsLogo">
                        <a href="/esb.portal/home.aspx">
                            <img id="img_logo" alt="Logo" src="@Url.Content("~/Images/mvclogo.jpg")" />
                        </a>
                    </div>
                    <div id="esbLogo">
                        <a href="/esb.portal/home.aspx">CSTES</a>
                        <div id="esbVersion">CDL Skills Test Entry System</div>
                    </div>
            </div>
        </div>
    </div>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Home</a></li>
            <li><a href="#tabs-2">Contacts</a></li>
        </ul>
        <div id="tabs-1">
            @Html.ActionLink("Home", "Index", "Home")
        </div>
        <div id="tabs-2">
            @Html.ActionLink("Contact", "Contact", "Home")
        </div>
    </div>
    <div>
        @RenderSection("InfoBar", required: false)
    </div>
    <div>
        @RenderBody()
    </div>
</body>
</html>