MVC go to specific tab using Jquery

Question

I am doing this in .net MVC 4 & I have made tabs using

<div id="tabs">
<ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li><a href="#tab-4">Tab 4</a></li>
</ul></div>

I want to go in a specific tab for example in (Tab 4), I am using this line of code but no Success, here (".btn") is the class when the link is clicked.

<script type="text/javascript">
        $(".btn").click(function () {
        $("#tabs").tabs('select', "#tab-4");
        });
</script>

I have also used some thing like this: $("#tabs").tabs({"option", "", 3});

Please tell me the raight way to get rid of this.

Answer 1

From the docs, the option you are looking for is active:

{ active: index }

Where index is a zero-based index. So your code needs to be:

$(".btn").click(function () {
    $("#tabs").tabs({ active: 3 });
});

Here is a fiddle of the above.