Community Learn Tools Library Leisure
search
English
html5 - 这种交互布局最好的实现方式是什么？
PHP中文网
PHP中文网 2017-04-17 13:03:33
0
3
415

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

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

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(3)
刘奇
刘奇2017-04-17 13:05:33 3 floor

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

Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-17 13:05:33 2 floor

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

Like +0
Add Reply
阿神
阿神2017-04-17 13:05:33 1 floor

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

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template