按ENTER键切换HTML选项卡

Question

这就是我设计的内容：

这些标签中的每一个都有自己的输入表单。

在第一个输入表单（Name中的一个）中按ENTER键时，我需要切换选项卡并将焦点设置到下一个选项卡中的输入表单。必须重复此操作，直到我在最后一个选项卡（位置）中按ENTER键，此时将收集所有表单中的数据并将其作为webrequest提交。

这是我的输入表格：

<form><input type="text" name="name" placeholder="Name..." onsubmit="toggleFn()"></form>

toggleFn（）：

function toggleFn() {
            document.getElementById("email").focus();
        }

此处，电子邮件是第二个标签中输入表单的ID，但按Enter键后，页面只会重新加载选项？name = whatevername

以下是标签的代码：

<div class="container-fluids">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Name</a></li>
    <li><a data-toggle="tab" href="#menu2">E-Mail</a></li>
    <li><a data-toggle="tab" href="#menu3">Phone Number</a></li>
    <li><a data-toggle="tab" href="#menu4">Location</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active"><br>
      <h4>HOME</h4>
    </div>
    <div id="menu1" class="tab-pane fade"><br>
      <h4>Name</h4>
      <p>Enter name</p>
      <form><input type="text" name="name" placeholder="Name..." onsubmit="toggleFn()">
      </form>
    </div>
    <div id="menu2" class="tab-pane fade"><br>
      <h4>E-Mail</h4>
      <form><input type="text" name="email" placeholder="E-Mail..."></form>
    </div>
.
.
.

如果您还不知道，我在Javascript和Web开发方面的知识非常有限。 请让我知道我做错了什么。

感谢阅读。

Answer 1

您可以使用Javascript隐藏并向选项卡添加类。

 var data = {};
function toggleFn(form) {
    if (form.getAttribute('name') === 'name') {
        data.name = form.name.value;
        toggleElements(1);
        setFocus('email');
    } else if (form.getAttribute('name') === 'email') {
        data.email = form.email.value;
        toggleElements(2);
        setFocus('phone');
    } else if (form.getAttribute('name') === 'phone') {
        data.phone = form.phone.value;
        toggleElements(3);
        setFocus('location');
    } else if (form.getAttribute('name') === 'location') {
        data.location = form.location.value;
        // send data via ajax here
        // reload the page
        console.log(data);
    }
    return false;
}

function setFocus(id) {
    document.getElementById(id).focus();
}

function toggleElements(menuNumber) {
    document.getElementById('menu' + menuNumber).classList.add('deactive');
    document.querySelector('.menu' + menuNumber).classList.remove('active');
    document.querySelector('.menu' + (menuNumber + 1)).classList.add('active');
    document.getElementById('menu' + (menuNumber + 1)).classList.remove('deactive');
}

    .deactive {
        display: none;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    /* Change the link color to #111 (black) on hover */

    li a:hover {
        background-color: #111;
        color: #fff;
    }
    .active {
        background-color: white;
    }
    .active a {
        color: #000;
    }

<div class="container-fluids">
    <ul class="nav nav-tabs">
        <li><a data-toggle="tab" href="#home">Home</a></li>
        <li class="menu1 active"><a data-toggle="tab" href="#menu1">Name</a></li>
        <li class="menu2"><a data-toggle="tab" href="#menu2">E-Mail</a></li>
        <li class="menu3"><a data-toggle="tab" href="#menu3">Phone Number</a></li>
        <li class="menu4"><a data-toggle="tab" href="#menu4">Location</a></li>
    </ul>

    <div class="tab-content">
        <div id="menu1" class="tab-pane fade"><br>
            <h4>Name</h4>
            <p>Enter name</p>
            <form class="tabs" onsubmit="return toggleFn(this)" name="name"><input id="name" type="text"
                                                                                   placeholder="Name...">
            </form>
        </div>
        <div id="menu2" class="tab-pane fade deactive"><br>
            <h4>E-mail</h4>
            <p>Enter E-mail</p>
            <form class="tabs" name="email" onsubmit="return toggleFn(this)"><input id="email" type="email"
                                                                                    placeholder="E-mail...">
            </form>
        </div>
        <div id="menu3" class="tab-pane fade deactive"><br>
            <h4>Phone Number</h4>
            <p>Enter Phone Number</p>
            <form class="tabs" name="phone" onsubmit="return toggleFn(this)"><input id="phone" type="tel"
                                                                                    placeholder="Phone...">
            </form>
        </div>
        <div id="menu4" class="tab-pane fade deactive"><br>
            <h4>Location</h4>
            <p>Enter Location</p>
            <form class="tabs" name="location" onsubmit="return toggleFn(this)"><input type="text" id="location"
                                                                                       placeholder="Location...">
            </form>
        </div>
    </div>
</div>