【发布时间】：2017-11-15 14:33:27
【问题描述】：
我正在开发一个应用程序，这是我遇到问题的第二个屏幕。 有一个跳过按钮，当我按下它时，“其中包含文本的 div”应该隐藏。
我在打字稿文件“home.ts”中编写了代码，并在 home.html 中编写了它的 html，在 home.css 中编写了 css
我只用这些代码完成了 2 个屏幕，一个是启动屏幕，另一个是免责声明或主屏幕，我试图在单击跳过按钮时用文本隐藏 div
这里是 home.ts 代码：
import { Component,ViewChild} from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl:'home.html'
})
export class HomePage {
@ViewChild('username')username;
@ViewChild('password')password;
splash = true;
constructor(public navCtrl: NavController ) {
}
showhide(){
var toggle = function() {
var mydiv = document.getElementById('div');
if (mydiv.style.display === 'block' || mydiv.style.display === ''){
mydiv.style.display = 'none';
}
else{
mydiv.style.display = 'block';
}
}
}
ionViewDidLoad() {
setTimeout(() => this.splash = false, 4000);
}
}
and here is home.html file
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="lib/jquery-1.11.1.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="js/show.js"></script>
<script src="build/animation.css"></script>
</head>
<body ng-controller="imageshow_hide">
<ion-content>
<div id="custom-overlay"[style.display]="splash ? 'flex': 'none'">
<div class="flb">
<div class="Aligner-item Aligner-item--top">
</div>
<img src="assets/logo.png">
<div class="Aligner-item Aligner-item--bottom">
</div>
</div>
</div>
<div class="scroll-content">
<img class="image1" src="assets/bg2.jpg"/>
<div id="hides" class="image2"><img src="assets/whitetop.png"/>
<h2 style="text-align:center">WHY SHOULD I USE THIS APP
</h2>
<p>Our thoughts and everything we see feel hear taste and smell
shapes the unconscious mind.
By listening to affirmations daily.guided meditation and performing simple NLP techniques
you can re-program your mind to focus on the results you desire in life and develop
positive patterns for motivation and action
</p>
</div>
<div id="hides" class="image3"><img src="assets/whitebottom.png"/>
<h2 style="text-align:center">HOW TO USE THIS APP</h2>
<p>Don't listen to any of these recordings
while operating machinery or driving.only listen to these materials if you
are in safe place where you can relax.
All contents provided within their applications are NOT meant to replace
any qualified medical treatment or health related advice.
If you suffer from any mental disorder,NOT Listen to this material.
MindVolution accepts No responsibility or liability for any injury,loss or damage
as direct or indirect result of the usage of the information here presented.
</p>
</div>
<button (click)="showhide()" id="hides">
<img class="image4" ng-hide="checked" src="assets/skip.png"/>
</button>
<img class="image5"src="assets/sound icon.png"/>
<img class="image6"src="assets/sound icon.png"/>
</div>
</ion-content>
</body>
</html>
【问题讨论】：
标签： javascript html css angularjs ionic-framework