好吧,在我的节目视图中,我制作了一个带侧导航的仪表板,可以切换不同的部分。
<script>
$(document).ready(function(){
$("#chartsP, #tablesP, #formsP").hide();
});
function dash(){
$("#chartsP, #tablesP, #formsP").hide();
$("#dashboardP").show();
};
function chart(){
$("#dashboardP, #tablesP, #formsP").hide();
$("#chartsP").show();
};
function table(){
$("#dashboardP, #chartsP, #formsP").hide();
$("#tablesP").show();
};
function form(){
$("#dashboardP, #chartsP, #tablesP").hide();
$("#formsP").show();
};
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav id="c_nav" class="navbar navbar-default navbar-fixed-top">
</nav>
<div id="admin_sidenav" class="navbar-default sidebar" role="navigation">
<ul class="nav in" id="side-menu">
<li>
<a onclick="dash()">
<i class="fa fa-dashboard fa-fw"></i>
Dashboard
</a>
</li>
<li>
<a onclick="chart()">
<i class="fa fa-bar-chart-o fa-fw"></i>
Charts
</a>
</li>
<li>
<a onclick="table()">
<i class="fa fa-table fa-fw"></i>
Tables
</a>
</li>
<li>
<a onclick="form()">
<i class="fa fa-edit fa-fw"></i> Forms</a>
</li>
<li>
<a >
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
</a>
</li>
</ul>
</div>
<div id="dashboard_content_area">
<div id="dashboardP"><%= render 'instructors/partials/dashboard' %></div>
<div id="tablesP"><%= render 'instructors/partials/tables' %></div>
<div id="formsP"><%= render 'instructors/partials/courseforms' %></div>
<div id="chartsP"><%= render 'instructors/partials/charts' %></div>
</div>
我注意到只有3个部分最终被发送到客户端,例如,如果我要查看chrome dev工具中的元素,我会看到前3个,但“chartsP”将是缺席,但如果我切换顺序,它似乎总是被丢弃。