简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - 这种交互布局最好的实现方式是什么？
PHP中文网
PHP中文网 2017-04-17 13:03:33
0
3
413

像这种布局，左边菜单，右边内容，点击菜单选项，内容会变化，应该用什么方式做比较好？

左边可以是一排ul和li，右边是许多个p，左边点击时，用js将右边对应的p显示出来，这是一种办法，还能有别的办法吗？

PHP中文网
PHP中文网

认证高级PHP讲师

모든 응답(3)
刘奇
刘奇2017-04-17 13:05:33 3층

这种视图的切换前后端都可以实现~
后端最好依靠一些框架来做，如thinkPHP···

主要谈一下前端···
js来操作那么一大块儿区域显然是不合适的，题主可以借助angularJS来实现，那么的话，右边区域设为一个ng-view。各种页面缓存在$templateCache里面，这样做成一个单页web 应用···· 切换起来十分流畅，只会局部刷新···

좋다 +0
답글 추가
伊谢尔伦
伊谢尔伦2017-04-17 13:05:33 2층

单页面应用，前端框架中的路由可以实现

좋다 +0
답글 추가
阿神
阿神2017-04-17 13:05:33 1층

@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>

如图，刚载入页面的时候,并没有载入任何内容，需要点击后，才能显示。

如何在刚载入页面的时候就加载出来第一个页面呢？谢谢……

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！