简体中文(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
376

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

左边可以是一排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學習者快速成長！