How can I show different Views in their corresponding tabs? - asp.net-mvc-4

Question

It doesn't matter which tab I click on, it doesn't show anything. I want to show the View in its corresponding tab. I don't know what to put between <div id="tab...">**HERE**</div> to show the View (see complete code bellow)
The View looks like this:
<ul id="tabs">
<li>#Html.ActionLink("Random stuff", "TabbedIndex?claimed=false", "Stuff", null, new { name = "tab1" }) </li>
<li>#Html.ActionLink("Special stuff", "TabbedIndex?claimed=true", "Stuff", null, new { name = "tab2" }) </li>
</ul>
<div id="content">
<div id="tab1"></div>
<div id="tab2"></div>
</div>
This is my script:
<script>
$(document).ready(function () {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id", "current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function (e)
{
e.preventDefault();
if ($(this).closest("li").attr("id") == "current") { //detection for current tab
return;
}
else {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id", ""); //Reset id's
$(this).parent().attr("id", "current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
});
});
</script>

Answer 1

Assuming both tabs are hidden at load time, you can try this:
<script>
$('#tabs a').click(function (e)
{
e.preventDefault();
var name = $(this).attr("name"), tab = $("#" + name);
if (tab.is(":visible")) {
//if the tab is visible, do nothing
return;
}
else {
// show the selected tab and hide all the siblings/neighbours tabs
tab.show().siblings().hide();
}
});
</script>

Answer 2

This is the solution, I didn't change anything in the original code and script:
<div id="content">
<div id="tab1">#{ Html.RenderAction("TabbedIndex", "Stuff", new { claimed = false }); }</div>
<div id="tab2">#{ Html.RenderAction("TabbedIndex", "Stuff", new { claimed = true }); }</div>
</div>