Html 单击以另一个div替换div

我在ServiceNow中构建了一个小部件，它显示用户的入职步骤，当单击某个步骤时，下面会出现一个div，列出用户需要完成的所有任务。虽然这样做很好，但我认为如果任务列表将取代整个入职步骤div，而不是在入职步骤下方显示一个带分隔线的div，那么它看起来会更圆滑。然后可能会有一个后退按钮，通过一些淡入/淡出动画将它们带回到入职步骤。如果可能的话，我希望在没有jquery的情况下完成这项工作。有人能给我一些指导或指导我举个例子吗

到目前为止，我的HTML如下所示：

<div class="container" ng-if="!c.data.loading && c.stage.length>0">
  <div class="parent">
    <div class="child" ng-repeat="item in c.stage track by $index">
      <div class="at-work-process position-relative overflow-hidden text-center">
        <div class="at-work-process-text">
          <span class="at-work-process-step" ng-class="{inactive: item.workflow_order>c.currentOrder}">Step</span>
          <span class="at-work-process-number" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{$index+1}}</span>
          <span class="at-work-process-number-text" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{item.workflow_stage}}</span>
          <div class="at-separator-thick" ng-class="{active_stage: item.currentStage, completed_stage: item.incompleteTotal==0 && item.workflow_order<c.currentOrder}"></div>
        </div>
        <div ng-click="showDetails(item);" class="at-work-process-details" ng-class="{inactive: item.workflow_order>c.currentOrder}">          
          <div ng-if="item.incompleteTotal>0 && item.workflow_order<=c.currentOrder" class="full-height">
            <i class="material-icons" style="color:#e53935;">assignment_late</i>
            <span ng-if="item.incompleteTotal>1">Incomplete <br/> {{item.incompleteTotal}} Tasks Require Your Attention</span>
            <span ng-if="item.incompleteTotal==1">Incomplete <br/> {{item.incompleteTotal}} Task Require Your Attention</span>
          </div>
          <div ng-if="item.incompleteTotal==0 && item.workflow_order>c.currentOrder" class="full-height">
            <i class="material-icons" style="color:#78B4F3;">assignment</i>
            <span>Not Started</span>
          </div>
          <div ng-if="item.incompleteTotal==0 && item.workflow_order<c.currentOrder" class="full-height">
            <i class="material-icons" style="color:#43A047;">assignment_turned_in</i>
            <span>Complete</span>
          </div>
        </div>
      </div>
    </div> 
  </div>

步
{{$index+1}}
{{item.workflow_stage}
迟交作业
不完整的
{{item.incompleteTotal}任务需要您的注意
不完整的
{{item.incompleteTotal}任务需要您的注意
分配
没有开始
交上来的作业
完成

//我希望下面的div将取代上面的div，而不是出现在它下面//

  <div ng-if="active_tasks.length>0" ng-class="taskClass" class="text-center tasksDiv">
    <md-divider></md-divider>
    <h3>{{active_workflow}} Tasks:</h3>
    <ul style="list-style:none; padding-left:0; display:inline-block">
      <li ng-repeat="tasks in active_tasks track by $index" style="display:flex; align-items:center; padding-bottom:0.5rem;">
        <i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i>
        <a ng-if="tasks.url.indexOf('table2')!=-1" ng-click="c.enroll(tasks)" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
        <a ng-if="tasks.url.indexOf('table1')!=-1" ng-click="c.tableNew()" href="javascript: void(0)"ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
        <a ng-if="tasks.hr_task_type=='url' && tasks.url.indexOf('c.')==-1" href="{{tasks.url}}" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
                <a ng-if="tasks.url.indexOf('launchWith')!=-1" ng-click="c.launchWith()" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
        <a ng-if="tasks.hr_task_type!='url'" ng-click="review(tasks)" href="javascript: void(0)" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
      </li>
    </ul>
  </div>
</div>

{{active_workflow}}任务：


{{tasks.icon}

您的html有点难以理解，因此我不确定您想隐藏/显示哪些块，但您可以非常简单地做到这一点。只需在您的作用域上创建一个变量，

showTaskList

，并将其设置为

true/false

。然后在入职列表的父div上执行，

ng if=“！showTaskList”

，在任务列表的父div上执行，

ng if=“showTaskList”

---

当人员单击按钮在任务列表或入职步骤之间切换时，只需将此bool切换到相反的位置，

showTaskList=！showTaskList

您的html有点难以理解，因此我不确定您想隐藏/显示哪些块，但您可以非常简单地完成这项工作。只需在您的作用域上创建一个变量，

showTaskList

，并将其设置为

true/false

。然后在入职列表的父div上执行，

ng if=“！showTaskList”

，在任务列表的父div上执行，

ng if=“showTaskList”

---

当人员单击按钮在任务列表或入职步骤之间切换时，只需将此bool切换到相反的位置，

showTaskList=！showTaskList

我会在第一个div上附加一个ng if，它在第二个div的相反条件下工作

---

因此，在本例中，第二个div将

ng if=“active_tasks.length>0”

作为其显示条件。因此，您可以设置一个

ng if=“active_tasks.length我会将一个ng if附加到第一个div，该div在与第二个div相反的条件下工作

因此，在本例中，您的第二个div将
ng if=“active\u tasks.length>0”
作为其显示条件。因此您可以设置
ng if=“active\u tasks.lengthwha，非常感谢！如果我想创建一个返回按钮，将我带回到“入职列表”视图，我该怎么做？我想我需要一个ng的点击来切换显示活动的任务。长度再次大于0，对吗？是的，你会想要清除列表以满足该条件。这里的另一个选择可能是像泰勒在下面建议的那样，创建一个单独的布尔/状态对象来跟踪您所在的位置，而不是使用列表大小。这可以让你一直填充列表（并提前填充）。哇，太棒了，谢谢！如果我想创建一个返回按钮，将我带回到“入职列表”视图，我该怎么做？我想我需要一个ng的点击来切换显示活动的任务。长度再次大于0，对吗？是的，你会想要清除列表以满足该条件。这里的另一个选择可能是像泰勒在下面建议的那样，创建一个单独的布尔/状态对象来跟踪您所在的位置，而不是使用列表大小。这使您可以保持填充列表（并提前填充）。