求一个后台管理系统的多页面切换（类似于tab切换）小例子

Question

我因为用了angular,现在是单页面。多页面不知道用哪个做？

Answer 1

首先看效果

这是你要的效果吧，点击tan页“普宁公测榜单”和“评测内容”的时候下方的页面也会改变。

然后是代码：

<!--//tab页切换ifram begin 如果想另一个页面也有这个效果则必须另一个页面也要添加 如下 部分-->
    <div>
        <ul role="tablist" class="nav nav-tabs" id="myTab">
            <li class="nav" id="labelNav"><a role="tab" data-tab="#firstFram" href="/manage/column/test/index">评测榜单</a></li>
            <li class="nav active" id="contentNav"><a role="tab" data-tab="#secondFram" href="#secondFram">评测内容</a></li>
        </ul>
    </div>
    <!--//tab页切换ifram end-->

<div class="panel panel-default main_contents" id="secondFram"></div>

第二个页面的代码

<!--//tab页切换ifram begin 如果想另一个页面也有这个效果则必须另一个页面也要添加 如下 部分-->
    <div>
        <ul role="tablist" class="nav nav-tabs" id="myTab">
            <li class="nav active" id="labelNav"><a role="tab" data-tab="#firstFram" href="#firstFram">评测榜单</a></li>
            <li class="nav" id="contentNav"><a role="tab" data-tab="#secondFram" href="/manage/column/orignal/index">评测内容</a></li>
        </ul>
    </div>
    <!--//tab页切换ifram end-->

<div class="panel panel-default main_contents" id="firstFram"></div>

能解决您的问题不，满意请点赞。。。。。。。谢谢

Answer 2

如果你现在用的是ui-route，那就很简单了

<ul class="nav nav-tabs">
    <li ui-sref-active="active"><a ui-sref="entrantexam.personcount()">参考人数统计</a></li>
    <li ui-sref-active="active"><a ui-sref="entrantexam.mainaveanalysis()">三科均分分析</a></li>
</ul>

这就是路由控制样式，就是当转调到这个路由时，会给对应的li添加active样式，而你要做的就是写样式而已