在下拉菜单上配置HTML主体

Question

我对棱角和类型记录非常陌生；我正在开发一个应用程序，允许您在选择下拉菜单时编辑三个字段，即SET1、SET2、SET3。

示例:下拉菜单中有3项：menu-1、menu-2和menu-3，每个菜单都有3个不同的选项卡，即SET1、SET2、SET3。

所以当我点击下拉菜单-1时，我可以编辑SET1，SET2，SET3，它属于菜单-1。

到目前为止，我已经开发了SET1、SET2、SET3选项卡，但我不知道如何添加下拉列表，而SET1、Set2E 229、E 130SET1 3E 231将相应更改。

我的HTML文件：

<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">SET-1</label>
    <div class="content">
      
      <p>
        <h2>A prime number</h2>Write a Java program to check if a given number is prime or not. Remember, a prime number is a number which is not divisible by any other number, e.g. 3, 5, 7, 11, 13, 17, etc. 
        Be prepared for cross, e.g. checking till the square root of a number, etc.
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">SET-2</label>
    <div class="content">
      <p><h2>String Palindrome</h2>You need to write a simple Java program to check if a given String is palindrome or not. A Palindrome is a String which is equal to the reverse of itself, e.g., "Bob" is a palindrome because of the reverse of "Bob" is also "Bob."  Though be prepared with both recursive and iterative solution of this problem.
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-3" name="tab-group-1">
    <label for="tab-3">SET-3</label>
    <div class="content">
      <p><h2>Integer Palindrome</h2>This is generally asked as follow-up or alternative of the previous program. This time you need to check if given Integer is palindrome or not. An integer is called palindrome if it's equal to its reverse, e.g. 1001 is a palindrome, but 1234 is not because the reverse of 1234 is 4321 which is not equal to 1234. You can use divide by 10 to reduce the number and modulus 10 to get the last digit. This trick is used to solve this problem.
    </div>
  </div>
</div>
<p>Each Set contains atleast three question, select the sets from the drop down list and then edit the question given</p>

My文件：

.tabs {
    position: relative;
    min-height: 200px; /* This part sucks */
    clear: both;
    margin: 25px 0;
  }
  .tab {
    float: left;
  }
  .tab label {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
  }
  .tab [type="radio"] {
    opacity: 0;
  }
  .content {
    position: absolute;
    top: 28px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    border: 1px solid #ccc;
    overflow: hidden;
  }
  .content > * {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.6s ease;
  }
  [type="radio"]:focus ~ label {
    ouline: 2px solid blue;
  }
  [type="radio"]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
  }
  [type="radio"]:checked ~ label ~ .content {
    z-index: 1;
  }
  [type="radio"]:checked ~ label ~ .content > * {
    opacity: 1;
    transform: translateX(0);
  }

我的.ts文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-questions-set',
  templateUrl: './questions-set.component.html',
  styleUrls: ['./questions-set.component.css']
})
export class QuestionsSetComponent implements OnInit {

  constructor() { 
  }

  ngOnInit() {
    
  }

}

我的工作至今：http://jsfiddle.net/zgua05mk/

Answer 1

您需要在component.ts文件中使用一个变量，例如单击或任何您想要的对象，并使用方法检查它，例如：

<div id="example" (click)="checked()>

在你的ts中：

checked(){
this.clicked=true;
}

最后，在html中(使用div)使用*ngIf操作符查看变量是否被选中(用户单击div)：

<div id="show whatever you want after the click" *ngIf="clicked==true">
//the code you need to show after user interation