Heim > Fragen und Antworten > Hauptteil
像这种布局,左边菜单,右边内容,点击菜单选项,内容会变化,应该用什么方式做比较好?
左边可以是一排ul和li,右边是许多个p,左边点击时,用js将右边对应的p显示出来,这是一种办法,还能有别的办法吗?
怪我咯2017-04-17 13:05:33
这种视图的切换前后端都可以实现~
后端最好依靠一些框架来做,如thinkPHP···
主要谈一下前端···
js来操作那么一大块儿区域显然是不合适的,题主可以借助angularJS来实现,那么的话,右边区域设为一个ng-view。各种页面缓存在$templateCache里面,这样做成一个单页web 应用···· 切换起来十分流畅,只会局部刷新···
阿神2017-04-17 13:05:33
@boomler 谢谢,我按照你说的弄了,效果很好,不过有个小问题再请教一下。
代码如下:
<!DOCTYPE html>
<html ng-app="myRouteApp">
<head>
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body>
<p>
<ul>
<li><a href="#pa/ge1">go page 1</a></li>
<li><a href="#pa/ge2">go page 2</a></li>
<li><a href="#other">to other page</a></li>
</ul>
</p>
<p ng-view></p>
<script type="text/javascript">
angular.module("myRouteApp", ["ngRoute"])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/pa/ge1", {
templateUrl: "page1.php"
})
.when("/pa/ge2", {
templateUrl: "page2.html"
})
.otherwise({
redirectTo: "/"
});
}]);
</script>
</body>
</html>
如图,刚载入页面的时候,并没有载入任何内容,需要点击后,才能显示。
如何在刚载入页面的时候就加载出来第一个页面呢?谢谢……