时间戳

首页 > 解决方案 > 在下拉选择中配置 HTML 正文

html - 在下拉选择中配置 HTML 正文

问题描述

我对 Angular 和打字稿很陌生；我正在开发一个应用程序，可让您在选择下拉菜单时编辑三个字段，即SET1、SET2、SET3 。

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

因此，当我从下拉菜单中单击 menu-1 时，我可以编辑属于menu-1 的SET1、SET2、SET3。

到目前为止，我已经能够开发SET1、SET2、SET3选项卡，但我不知道如何添加下拉菜单，并且SET1、SET2、SET3会相应更改。

我的 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>

我的 CSS 文件：

.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/

标签： htmlangulartypescript

解决方案

你需要在 component.ts 文件中使用一个变量，比如 clicked 或者你想要的任何地方，并使用一种方法来检查它，例如：

<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

推荐阅读