关于tabs如何跳转页面的问题

一、前台页面设计

 <div>

        <div id="Sindex1">@Html.ActionLink("主页","Index","Home")   @Html.ActionLink("退出","LoginOut","Home")</div>

        <div id="tabs">

          <ul >

            <li><a href="/StudentsInfo/SInfoList" name="#tabs-1">学生个人信息</a></li>

            <li><a href="/StudentsInfo/KInfoList" name="#tabs-2">饭卡信息</a></li>

            <li><a href="/StudentsInfo/SEdit" name="#tabs-3">学生信息管理</a></li>

            <li><a href="/StudentsInfo/KEdit" name="#tabs-4">饭卡信息管理</a></li>

          </ul>

          <div id="tabs-1"> </div>

          <div id="tabs-2"> </div>

          <div id="tabs-3"> </div>

          <div id="tabs-4"> </div>

        </div>

    </div>

二、必须引用最新的JQuery

 @if (false) 

    {

        <script src="~/Scripts/jquery-2.1.4.intellisense.js"></script>

    }

    <script src="~/Scripts/jquery-2.1.4.js"></script>

    <script src="~/Scripts/jquery-ui-1.11.4.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

    <script src="~/Scripts/jquery.validate.js"></script>

    <link type="text/css" rel="stylesheet" href="~/Content/Css/StudntsStyle.css" />

    <script type="text/javascript" src="~/Content/Js/StudentsIndex.js"></script>

//如果不引用最新的JQuery,否则无法利用Tabs来在同一页面下显示其他页面，而是直接跳转的其他页面

三、而StudentsIndex.js的文件只有一条JS

$(function () {

    $('#tabs').tabs({

        collapsible: true

    });

});

当然，你也可以到其他网站上找到关于Tabs的属性，从而进行设计。

四、StudntsStyle.css的样式（主要是Tabs）

#tabs {

    width: 52%;

    margin: 30px auto;

}

    #tabs ul {

        margin: 0;

        padding: 0;

        display: table;

        width: 100%;

    }

        #tabs ul li {

            float: left;

            list-style-type: none;

            margin-right: 2px;

            width: 170px;

            text-align: center;

        }

            #tabs ul li a {

                display: block;

                padding: 17px 30px;

                background: #ff6a00;

                text-decoration: none;

                color: #fff;

            }

            #tabs ul li.ui-tabs-active a {

                background: #fff;

                color: #655c89;

                outline: none;

            }

        

        #tabs-1, #tabs-2, #tabs-3, #tabs-4 {            

            overflow: hidden;

            position: relative;

            background: #ff6a00;

        }

//这里面的东西可能不是很全面，不过作为菜鸟的我，已经重新测试了一变，完整的跳转。

//切记使用最新的Jquery，因为我试过使用过比较低版本的Jquery,无法使Tabs中跳转页面。