如何通过单击按钮隐藏div? [英] How to hide a div by clicking a button?

问题描述

在我的angular.js学习项目中，我想隐藏一个div并在单击按钮时显示另一个div. 在这段代码中，我希望在单击时隐藏第一个div(甚至将其销毁?)，并显示第二个div. 基本上，我希望从我的应用程序中的页面1转到页面2的用户体验. 我如何做到这一点?

In my angular.js learning project I want to hide one div and show another when I click a button. In this code, I'd like the first div to be hidden at the click (or even destroyed?) and the second div to be shown. Basically I want the user experience of going from page 1 to page 2 in my app. How do I make this happen?

Index.html

Index.html

  <ion-content ng-controller="StartpageCtrl">

      <div class="list card" id="startCard" ng-show="showstartCard">
          <div class="item item-image item item-text-wrap">
              Card 1
          </div>
      </div>
      <div class="list card" id="secondCard" ng-show="showsecondCard">
          <div class="item item-image item item-text-wrap">
              Card 2
          </div>
      </div>

      <button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
          Start now
      </button>

  </ion-content>

controllers.js

controllers.js

.controller("StartpageCtrl", funcion($scope){
    $scope.showstartCard = true;
    $scope.showsecondCard = false;

    $scope.hideCard = function() {
        $scope.showstartCard = false;
        $scope.showsecondCard = true;
    };
});

当我运行该页面时，我看到卡2"，并且单击按钮时什么也没有发生. 我想看到的是卡1"，当我单击按钮时，它会切换到卡2".

When I run the page I see "Card 2" and nothing happens when I click the button. What I wanted to see was "Card 1" and for it to switch to "Card 2" as I click the button...

已解决 我忘了在app.js angular.module中以及在index.html中的script标签中添加对controllers.js的引用.现在工作正常.

Solved I had forgotten to add references to controllers.js in the app.js angular.module as well as the script tag in index.html. It works fine now.

推荐答案

Using angular:   
 HTML file:
    <td><a href="#" ng-click="showDetails =! showDetails">Source Doc..</a>
                <div id="mydiv" ng-show="showDetails">
                    <div id="mydiv-container">
                        <div id="mydiv-content">
                            <a href="#" ng-click="showDetails =! showDetails">Close</a>
                            <br>
                            hello
                        </div>
                    </div>
                </div>

                </td>



    css file:
    body {
        height: 100%;
        background-color: #F0F0F0;
        font-family: Arial, sans-serif;
    }
    #mydiv {
        width: 100%;
        height: 100%;
        overflow: hidden;
        left: 100px;
        top: 150px;
        position: absolute;
        opacity: 0.95;

    }
    #mydiv-container {
        margin-left: auto;
        margin-right: auto;
    }
    #mydiv-content {
        width: 70%;
        padding: 20px;
        background-color: white;
        border: 1px solid #6089F7;
    }
    a {
        color: #5874BF;
        text-decoration: none;
    }
    a:hover {
        color: #112763;
    }

这篇关于如何通过单击按钮隐藏div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！