个人中心
gpt4 book ai didi

javascript - 单击按钮时打开半页

转载 作者：太空宇宙 更新时间：2023-11-03 20:31:24 26 4
gpt4 key购买 nike

我试图在单击按钮时打开一种新页面。例如，我有一些元素在页面中垂直和水平居中。我想要它以便在单击按钮时将我的所有元素移动到页面的左半部分并在右半页打开一个新页面。这是我的示例代码: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%;
}

当有人点击按钮时，这是我的目标: enter image description here

有什么建议吗？

最佳答案

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

只需创建 Angular 模块、该模块的 Controller 和一些用于呈现左侧和右侧 div 的 bool 值。我将此 bool 值称为 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%
}

指向我的 fiddle 的链接:https://jsfiddle.net/Jack_Hamby/c06gd2z4/

关于javascript - 单击按钮时打开半页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41315242/

26 4 0
文章推荐： matlab - 图像的 rgb
文章推荐： matlab - 使单击 MATLAB 绘图标记绘制子图
文章推荐： c# - Linq2Sql 和 lambda 返回 "Method ' System.Object DynamicInvoke(System.Object[] )' has no supported translation to SQL"
文章推荐： matlab - 在 Simulink 运行时为 MATLAB 功能 block 加载代码
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com