Jquery选项卡在文档就绪时一次显示所有选项卡

Question

我使用的是mvc 4而我在使用JqueryUi时遇到了麻烦，它总是一次显示所有标签。

在我的布局中

顶部

@Styles.Render("~/Content/css","~/Content/themes/package/css","~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")  

底

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/package")
@RenderSection("scripts", required: false)

在视图中

    <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>  commodo</p>
    </div>
    <div id="tabs-2">
        <p>  tincidunt, dui sit </p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id </p>
    </div>
</div>

@section scripts{
    <script type="text/javascript">

        $(document).ready(function () {
            $("#tabs").tabs();
        });
    </script>
    }

脚本渲染html页面没有错误。