search

Home  >  Q&A  >  body text

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

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

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

PHP中文网PHP中文网2767 days ago417

reply all(3)I'll reply

  • 怪我咯

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

    This kind of view switching can be realized on both the front and back ends~
    The back end is best done by relying on some frameworks, such as thinkPHP...

    Mainly talk about the front end...
    It is obviously inappropriate to use js to operate such a large area. The subject can use angularJS to achieve this. In that case, the right area is set to an ng-view. Various pages are cached in $templateCache, which turns it into a single-page web application... Switching is very smooth and only partial refreshes...

    reply
    0
  • 伊谢尔伦

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

    Single page application, routing in the front-end framework can be implemented

    reply
    0
  • 阿神

    阿神2017-04-17 13:05:33

    @boomler Thank you, I did it as you said, and the effect is very good, but I have a small problem and I would like to ask you for advice.

    The code is as follows:

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

    As shown in the picture, when the page is just loaded, no content is loaded. It needs to be clicked before it can be displayed.

    How to load the first page when the page is just loaded? Thank you...

    reply
    0
  • Cancelreply