razor - asp.net mvc 4 tabs

Question

I'm working on a project with Visual Studio 2010 ASP.Net MVC4 (engine view Razor) and need to make a tabs. I define this scrips and css:

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

It also defines the format html for the tabs:

<div id="tabs"> .....

but when excecute don't showme the tabs, how I can solve this problem. only showme format html, this:

Index

Tab Header 1

Tab Header 2

Tab Header 3

Content for Tab 1 goes here.

Content for Tab 2 goes here.

Content for Tab 3 goes here.

Answer 1

Here is a jsfiddle for Jquery Tabs.

Step 1: Import

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

Step 2: Html Code

In the ‘li’ tags you need to define the tab header and for each tab header a tab content div exists, the code below is pretty self explanatory.

<div id="tabs">

<ul>
    <li><a href="#tabs-1">Tab Header 1</a></li>
    <li><a href="#tabs-2">Tab Header 2</a></li>
    <li><a href="#tabs-3">Tab Header 3</a></li>
</ul>

<div id="tabs-1">
Content for Tab 1 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div id="tabs-2">
Content for Tab 2 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div id="tabs-3">
Content for Tab 3 goes here.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>

Step 3: Final Touch – Jquery call to tabs()

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>

Output:

Source