如何显示另一个页面而不重新加载？

时间：2019-03-05 17:33:36

标签： javascript php html

我正在“投资组合”页面的“管理”面板上工作。 

body {
  margin: 0;
  background-color: #E0E0E0;
}

.navbar {
  width: 100%;
  height: 40px;
  background-color: #21262a;
  position: fixed;
  top: 0;
  display: block;
}
.navbar .adminText {
  color: #d9f3fe;
  position: absolute;
  font-family: sans-serif;
  top: 50%;
  margin-left: 10px;
  transform: translateY(-50%);
  text-transform: uppercase;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
.navbar .logout {
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-style: none;
  height: 100%;
  width: 100px;
  background-color: #21262a;
  color: #d9f3fe;
  transition: .2s;
}

.logout:hover {
  background-color: #181b20;
  cursor: pointer;
}

.logout:focus {
  outline: none;
}

.control {
  height: calc(100% - 40px);
  width: 20%;
  background-color: #21262a;
  position: fixed;
  left: 0;
  bottom: 0;
}
.control .dashboard {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  background-color: #21262a;
  color: #d9f3fe;
  font-size: 1.1em;
  transition: .3s;
  text-align: left;
}
.control .dashboard:hover {
  background-color: #181b20;
  cursor: pointer;
}
.control .dashboard:focus {
  outline: none;
}
.control .dashboard i {
  margin-right: 10px;
  float: left;
  margin-left: 10px;
}

.workStation {
  position: absolute;
  height: calc(100%-40px);
  width: 80%;
  right: 0;
  top: 40px;
  z-index: 100;
}

#active {
  background-color: #006da0;
}
#active:after {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: #E0E0E0;
  transform: rotate(45deg);
  right: -10px;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>

<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
  <button class="logout">LOGOUT</button>
</div>

<aside class="control">
  <button class="dashboard" id="active"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
  
    <button class="dashboard"> <i class="fas fa-images"></i> Posts</button>
  
      <button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation">
  <h1>THis is DASHBOARD</h1>
</aside>

那是我的页面。

现在，我将其链接到我的数据库，我正在用PHP进行操作，但是现在我正在开发前端。 因此，当我单击Posts时，我想在该空白区域中显示该页面的内容。

我想您知道我的意思了。 那么最好的方法是什么？请记住，我正在使用PHP制作后端系统。

4 个答案:

答案 0 :(得分：0)

一种简单的方法是使用状态模式。这样，您可以通过更改应用程序的状态来加载不同的页面。让我向您展示一个执行此操作的示例。

<div id="content"></div>

const content = document.getElementById('content');

const PageState = function() {
  let currentState = new homeState(this);
  this.change = state => currentState = state;
}

const homeState = function() {
content.innerHTML = `This is my home page`;
}

const aboutState = function() {
content.innerHTML = `This is my about page`;
}

const page = new PageState();

page.change(new homeState);

您将content元素作为页面的主要标签，然后只需以所需的新状态调用page.change（）即可。这样可以避免更改页面，而仅更改页面的内容。

这将使您无需使用react.js或vue.js之类的javascript框架即可实现单页应用程序。这是入门的一种整洁而简单的方法。

答案 1 :(得分：0)

请尝试这个

    $(document).ready(() => {

        let return_text = true;
        let $content = $('.workStation');
        let $button = $('button.dashboard');

        if($button.attr('id') === 'active'){
            let data_uri = $button.data('uri');
            return_data($content,data_uri, return_text)
        }

        $button.click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            $this = $(this);
            $this.attr('id', 'active').siblings().removeAttr('id', 'active');
            let data_uri = $this.data('uri');
            return_data($content,data_uri, return_text)
        });

        function return_data($content,data_uri, return_text) {

            if (return_text) {
                $content.html(`<h1>${data_uri}</h1>`);
            } else {
                //Ajax
                $.get(data_uri).done(function (response, status){
                    if(status === 'success'){
                        $content.html(response);
                    }else{
                        alert('error! '+status);
                    }
                }).fail(function(jqXHR, textStatus){
                    alert("Request failed: " + textStatus);
                })
            }
        }
    });
 body {
        margin: 0;
        background-color: #E0E0E0;
    }

    .navbar {
        width: 100%;
        height: 40px;
        background-color: #21262a;
        position: fixed;
        top: 0;
        display: block;
    }

    .navbar .adminText {
        color: #d9f3fe;
        position: absolute;
        font-family: sans-serif;
        top: 50%;
        margin-left: 10px;
        transform: translateY(-50%);
        text-transform: uppercase;
        font-weight: 600;
        cursor: default;
        user-select: none;
    }

    .navbar .logout {
        float: right;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border-style: none;
        height: 100%;
        width: 100px;
        background-color: #21262a;
        color: #d9f3fe;
        transition: .2s;
    }

    .logout:hover {
        background-color: #181b20;
        cursor: pointer;
    }

    .logout:focus {
        outline: none;
    }

    .control {
        height: calc(100% - 40px);
        width: 20%;
        background-color: #21262a;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .control .dashboard {
        position: relative;
        width: 100%;
        height: 50px;
        border: none;
        background-color: #21262a;
        color: #d9f3fe;
        font-size: 1.1em;
        transition: .3s;
        text-align: left;
    }

    .control .dashboard:hover {
        background-color: #181b20;
        cursor: pointer;
    }

    .control .dashboard:focus {
        outline: none;
    }

    .control .dashboard i {
        margin-right: 10px;
        float: left;
        margin-left: 10px;
    }

    .workStation {
        position: absolute;
        height: calc(100% - 40px);
        width: 80%;
        right: 0;
        top: 40px;
        z-index: 100;
    }

    #active {
        background-color: #006da0;
    }

    #active:after {
        content: "";
        height: 20px;
        width: 20px;
        position: absolute;
        background-color: #E0E0E0;
        transform: rotate(45deg);
        right: -10px;
    }
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
    <h class="adminText">Zenzzex Portfolio Admin Panel</h>
    <button class="logout">LOGOUT</button>
</div>

<aside class="control">
    <button class="dashboard" id="active" data-uri="This is Dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard
    </button>
    <button class="dashboard" data-uri="This is Post"><i class="fas fa-images"></i> Posts</button>
    <button class="dashboard" data-uri="This is Add post"><i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation"></aside>

答案 2 :(得分：0)

此代码很简单，每个按钮中都有一个属性data-page =“”，将页面名称放入data-page =“ exemple.php或path / exemple.php” 

    $(document).ready(() => {

        let $content = $('.workStation');
        let $button = $('button.dashboard');

        if ($button.attr('id') === 'active') {
            let $data_uri = $button.data('page');
            return_page($content, $data_uri)
        }

        $button.click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            $this = $(this);
            $this.attr('id', 'active').siblings().removeAttr('id');
            let $data_uri = $this.data('page');

            if ($data_uri !== '') {
                return_page($content, $data_uri);
            }else{
                $content.html('<h1>Empty data-uri attribute<h1/>');
            }

        });
        
        function return_page($content, $data_uri) {

            $($content).load( $data_uri,function(responseText,textStatus){
               if(textStatus === 'error') $content.html(`<h1>${$data_uri} Page not found<h1/>`);
            });

        }
    });
 body {
            margin: 0;
            background-color: #E0E0E0;
        }

        .navbar {
            width: 100%;
            height: 40px;
            background-color: #21262a;
            position: fixed;
            top: 0;
            display: block;
        }

        .navbar .adminText {
            color: #d9f3fe;
            position: absolute;
            font-family: sans-serif;
            top: 50%;
            margin-left: 10px;
            transform: translateY(-50%);
            text-transform: uppercase;
            font-weight: 600;
            cursor: default;
            user-select: none;
        }

        .navbar .logout {
            float: right;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            border-style: none;
            height: 100%;
            width: 100px;
            background-color: #21262a;
            color: #d9f3fe;
            transition: .2s;
        }

        .logout:hover {
            background-color: #181b20;
            cursor: pointer;
        }

        .logout:focus {
            outline: none;
        }

        .control {
            height: calc(100% - 40px);
            width: 20%;
            background-color: #21262a;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        .control .dashboard {
            position: relative;
            width: 100%;
            height: 50px;
            border: none;
            background-color: #21262a;
            color: #d9f3fe;
            font-size: 1.1em;
            transition: .3s;
            text-align: left;
        }

        .control .dashboard:hover {
            background-color: #181b20;
            cursor: pointer;
        }

        .control .dashboard:focus {
            outline: none;
        }

        .control .dashboard i {
            margin-right: 10px;
            float: left;
            margin-left: 10px;
        }

        .workStation {
            position: absolute;
            height: calc(100% - 40px);
            width: 80%;
            right: 0;
            top: 40px;
            z-index: 100;
        }

        #active {
            background-color: #006da0;
        }

        #active:after {
            content: "";
            height: 20px;
            width: 20px;
            position: absolute;
            background-color: #E0E0E0;
            transform: rotate(45deg);
            right: -10px;
        }
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
    <h class="adminText">Zenzzex Portfolio Admin Panel</h>
    <button class="logout">LOGOUT</button>
</div>

<aside class="control">
    <button class="dashboard" id="active" data-page="dashboard.html"><i class="fas fa-tachometer-alt"></i> Dashboard
    </button>
    <button class="dashboard" data-page="post.html"><i class="fas fa-images"></i> Posts</button>
    <button class="dashboard" data-page="add_post.html"><i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation"></aside>
</body>

答案 3 :(得分：-1)

请尝试这个

$('#post').click(function(){
  $('.title-dashboard').hide();
  $('.title-post').show();
  
  $('#dasboard').removeClass('active');
  $('#post').addClass('active');
});

$('#dasboard').click(function(){
  $('.title-dashboard').show();
  $('.title-post').hide();
  
  $('#post').removeClass('active');
  $('#dasboard').addClass('active');
});
body {
  margin: 0;
  background-color: #E0E0E0;
}

.navbar {
  width: 100%;
  height: 40px;
  background-color: #21262a;
  position: fixed;
  top: 0;
  display: block;
}
.navbar .adminText {
  color: #d9f3fe;
  position: absolute;
  font-family: sans-serif;
  top: 50%;
  margin-left: 10px;
  transform: translateY(-50%);
  text-transform: uppercase;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
.navbar .logout {
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-style: none;
  height: 100%;
  width: 100px;
  background-color: #21262a;
  color: #d9f3fe;
  transition: .2s;
}

.logout:hover {
  background-color: #181b20;
  cursor: pointer;
}

.logout:focus {
  outline: none;
}

.control {
  height: calc(100% - 40px);
  width: 20%;
  background-color: #21262a;
  position: fixed;
  left: 0;
  bottom: 0;
}
.control .dashboard {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  background-color: #21262a;
  color: #d9f3fe;
  font-size: 1.1em;
  transition: .3s;
  text-align: left;
}
.control .dashboard:hover {
  background-color: #181b20;
  cursor: pointer;
}
.control .dashboard:focus {
  outline: none;
}
.control .dashboard i {
  margin-right: 10px;
  float: left;
  margin-left: 10px;
}

.workStation {
  position: absolute;
  height: calc(100%-40px);
  width: 80%;
  right: 0;
  top: 40px;
  z-index: 100;
}

.active {
  background-color: #006da0;
}
.active:after {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: #E0E0E0;
  transform: rotate(45deg);
  right: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>

<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
  <button class="logout">LOGOUT</button>
</div>

<aside class="control">
  <button class="dashboard" class="active" id="dasboard"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
  
    <button class="dashboard" id="post"> <i class="fas fa-images"></i> Posts</button>
  
      <button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>

<aside class="workStation">
  <h1 class="title-dashboard">THis is DASHBOARD</h1>
  <h1 style="display:none;" class="title-post">THis is POST</h1>
</aside>

相关问题
最新问题