Question

我有以下带有某些项目的sidenav菜单：

<ul class="account-settings-container" *ngIf="isUserActive">
  <li>
    <app-account-information></app-account-information>
  </li>
  <li>
    <app-theme-preference radioId="themePreference"></app-theme-preference>
  </li>
  <li>
      <app-numeric-format-preference radioId="numericPreference"></app-numeric-format-preference>
  </li>
  <li>
      <app-date-format-preference radioId="datePreference"></app-date-format-preference>
  </li>
  <li>
    <app-currency-preference radioId="currencyPreference"></app-currency-preference>
  </li>
  <li>
    <app-email-preference></app-email-preference>
  </li>
</ul>

这是component.ts：

import { Component, OnInit } from "@angular/core";
import { GlobalConfigurationService } from '../shared/Services/global-configuration.service';

@Component({
  selector: "app-right-menu",
  templateUrl: "./right-menu.component.html",
  styleUrls: ["./right-menu.component.scss"]
})
export class RightMenuComponent implements OnInit {
  isUserActive: boolean;

  constructor(private globalConfigurationService: GlobalConfigurationService) {
    this.globalConfigurationService.getUserSubject().asObservable().subscribe( user => {
      if (user != null) {
        this.isUserActive = true;
      } else {
        this.isUserActive = false;
      }
    });
  }

  ngOnInit() {
  }
}

我需要做的是在组件的html文件上，通过单击键盘的Tab键在<li>项之间导航。有可能吗？

Answer 1

*:focus:after {
  content: 'YES SIR!';
  display: inline-block;
  color: green;
  padding-left: 1rem;
  font-weight: 700;
}

<button>Button Test Tabbing</button><br/>
<a>Anchor Test Tabbing</a><br/><br/>

<ul>
  <li tabindex="0">li Test Tabbing</li>
  <li tabindex="0">li Test Tabbing</li>
  <li tabindex="0">li Test Tabbing</li>
  <li tabindex="0">li Test Tabbing</li>
  <li tabindex="0">li Test Tabbing</li>
  <li tabindex="0">li Test Tabbing</li>
  <li tabindex="0">li Test Tabbing</li>
  <li tabindex="0">li Test Tabbing</li>
</ul>

Angular 7-使用Tab键浏览<li>

1 个答案: