如何在单个 html 页面中为多个选项卡视图实现自动对焦属性功能？

Question

目前，我正在开发一个 Web 项目，其样本托管于：

https://meet-up-db14d.firebaseapp.com/

我想要实现的是在具有表单的两个选项卡中使用自动对焦属性功能。每当我切换标签时，光标应该自动聚焦到该标签视图中相应表单的第一个输入。

Answer 1

通过在模板 html 文件中包含以下脚本，我能够实现我正在寻找的内容：

 <script>
 var tabs = {
  one: document.querySelector('#one'),      //tab id="one"
  two: document.querySelector('#two'),     //tab id="two"
  three: document.querySelector('#three') //tab id="three"
 };

 tabs.one.addEventListener('click', function(e) {
 //console.log('one');
 document.getElementById("User Name").focus();
 });

 tabs.two.addEventListener('click', function(e) {
 //console.log('two');
 document.getElementById("Event name").focus();
 });
 </script>

如何在单个 html 页面中为多个选项卡视图实现自动对焦属性功能？

How to implement autofocus attribute feature for multiple tab views in a single html page?

html

javascript

jquery

tabs

autofocus