Question

我正在尝试在点击按钮时打开一种新页面。例如，我有一些在页面中垂直和水平居中的项目。我想要它，以便在单击按钮时，它会将我的所有项目移动到页面的左半部分，并在右半页面上打开一个新页面。这是我的示例代码：的 HTML：

<div>text</div>
<div>text</div>
<div>text</div>
<button>
Click me
</button>

CSS：

body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

当有人点击按钮时，这是我的目标：

有什么建议吗？

Answer 1

以下是使用 iframe 元素同时加载内容和外部内容的简单示例：

html, body, #wrapper {height:100%;}

#left {float:left; width: 50%; background-color:yellow; height:100%; padding:0;margin:0;}
#right {float:left; width:49%; background-color:grey; height:100%; padding:0; margin:0;}

<div id="wrapper">
  <div id="left">
    This is the original content
  </div>
  <iframe id="right" src="https://example.com">
    This is where the new content goes
  </iframe>
</div>

这是一个使用 AJAX 来完成您要求的示例。但是，您需要将URL替换为“page2”数据到此示例中。当您想要更多地控制外部数据的获取和消耗时，这将非常有用。

// Get a reference to the "right" container
var right = document.getElementById("right");

// Instantiate a new AJAX component
var xhr = new XMLHttpRequest();

// Set up the component to respond to changes in its state
xhr.addEventListener("readystatechange", function(){
  // If the request is complete
  if(xhr.readyState === 4){
    
    // If the result was successful
    if(xhr.status === 200){
      // successful call
      // Set the right content area to the returned value of the AJAX call
      right.innerHTML = xhr.responseText;
      
      // Change the widths of the div elements so that the right area
      // is now shown and the left area shrinks down
      left.style.width = "50%";
      right.style.width = "50%";
    }
  }
});

// Configure the AJAX request. You need to supply a URL
// on your server to get the new page data from:
xhr.open("GET", "SomeURL");

// Make the request
xhr.send();

html, body, #wrapper {height:100%;}

/* 
  In reality, change the left width to 100% and the right width to 0 here 
  The JavaScript will modify the values to 50/50. I've only set the values
  to 50/50 to show how the results will look
*/
#left {float:left; width: 50%; background-color:yellow; height:100%; padding:0;margin:0;}
#right {float:left; width:50%; background-color:grey; height:100%; padding:0; margin:0;}

<div id="wrapper">
  <div id="left">
    This is the original content
  </div>
  <div id="right">
    This is where the new content goes
  </div>
</div>

Answer 2

如果您习惯使用js框架，可以使用angularJs轻松完成。

简单地创建和角度模块，该模块的控制器，以及一些布尔值来渲染左侧和右侧div。我调用了这个布尔clicked，代码如下：

HTML：

<body ng-app="myApp" ng-controller="myCtrl">
<div class="center-box" ng-if="!clicked">
  <p>{{Item1}}</p>
  <p>{{Item2}}</p>
  <p>{{Item3}}</p>
  <button ng-click="setClicked()"> Click me </button>
</div>
<div class="r-half" ng-if="clicked">
   <div style="text-align:center;">
    My new Page here
  </div>
</div>
<div class="l-half" ng-if="clicked">
  <div style="text-align:center;">
    <p>{{Item1}}</p>
    <p>{{Item2}}</p>
    <p>{{Item3}}</p>
  </div>
</div>
</body>

JS：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
        $scope.Item1 = "myItem";
    $scope.Item2 = "anotherItem";
    $scope.Item3 = "aThirdItem";

    $scope.clicked = false;

    $scope.setClicked = function(){
        $scope.clicked = !$scope.clicked;
    }

});

CSS：

.center-box {
  text-align:center;
  height:100%;
  width:100%;
}

.r-half {
  width:50%;
  float:right;
  height:100%
}

.l-half {
  width:50%;
  float:left;
  height:100%
}

指向我的小提琴的链接：https://jsfiddle.net/Jack_Hamby/c06gd2z4/

Answer 3

丢失了css中的body标签相反，在您的身体中创建2个<div>元素使用float css属性并排设置：

.div1 {
    height:400px;
    width:50%;
    float:left;
}

.div2 {
    height:400px;
    width:50%;
    float:right;
    display:none;
}

之后，单击按钮时，显示div2。

在您的HTML中：

<body>
   <div class='div1'>content 1</div>
   <div class='div2'>content 2</div>
</body>

Answer 4

如果有帮助，请检查一下。如果需要改进，请给我反馈意见？

$('#button').click(function(){
  $('.new-content').toggleClass('half').delay(600).fadeIn(100);
  $('.content-container').toggleClass('half');
});

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
.content-container {
  height: 100vh;
  display: block;
  background: #ddd;
  float: left;
  width: 100%;
  position: relative;
}
.new-content {
  display: none;
  float: left;
  width: 0;
  height: 100vh;
  background: #f60;
}
.new-content.half,
.content-container.half {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
  <div class="content">
  <div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
  </div>
  </div>
<div class="new-content">
  </div>

单击按钮时打开半页

4 个答案: