首頁  >  問答  >  主體

html5 - 这种交互布局最好的实现方式是什么?

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

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

PHP中文网PHP中文网2715 天前381

全部回覆(3)我來回復

  • 怪我咯

    怪我咯2017-04-17 13:05:33

    這種視圖的切換前後端都可以實現~
    後端最好依靠一些框架來做,如thinkPHP···

    主要談一下前端···
    js來操作那麼一大塊兒區域顯然是不合適的,題主可以藉助angularJS來實現,那麼的話,右邊區域設為一個ng-view。各種頁面快取在$templateCache裡面,這樣做成一個單頁web 應用程式···· 切換起來十分流暢,只會局部刷新···

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 13:05:33

    單一頁面應用,前端框架中的路由可以實現

    回覆
    0
  • 阿神

    阿神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>

    如圖,剛載入頁面的時候,並沒有載入任何內容,需要點擊後,才能顯示。

    如何在剛載入頁面的時候就載入出來第一個頁面呢?謝謝……

    回覆
    0
  • 取消回覆