Question

目前我正在建立一个网站。在此特定页面上，管理员可以编辑系统的用户。我将此页面布局设置为选项卡。如果您在按下提交按钮之前处于活动选项卡上，我希望将其设置为位置，以确保填写该选项卡上的所有字段。

我无法根据需要设置这些文本字段，因为不需要那些文本字段中没有活动的选项卡。

以下是我的标签

的JavaScript代码

<script type="text/javascript">

function openTab(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";

    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    }

</script>

然后，这是构成选项卡中字段的HTML的一部分。

<ul class="tab">
    <li><a href="#" class="tablinks" onclick="openTab(event, 'CreateUser')">Create New User</a></li>
    <li><a href="#" class="tablinks" onclick="openTab(event, 'SetPassword')">Set New User Password</a></li>
    <li><a href="#" class="tablinks" onclick="openTab(event, 'SetRole')">Set User Role</a></li>
    <li><a href="#" class="tablinks" onclick="openTab(event, 'DeleteUser')">Delete User</a></li>
    <li><a href="#" class="tablinks" onclick="openTab(event, 'RestoreUser')">Restore Previous User</a></li>
</ul>

<div id="CreateUser" class="tabcontent">
  <h3>Create a New User</h3>
    <p>Use this page to create a new user into the system.</p>
        <input type="text" name="FName" placeholder="Enter First Name" maxlength="25">
        <br><br>
        <input type="text" name="LName" placeholder="Enter Last Name" maxlength="25">
        <br><br>
        <input type="email" name="email" placeholder="Enter E-mail Address" maxlength="50">
        <br><br>
        <input type="text" name="username" placeholder="Enter Username" maxlength="25">
        <br><br>
        <input type="password" name="password" placeholder="Enter Password" maxlength="25">
        <br><br>
        <div class="SetUserRole">
            <select name="Role" >
                <option value="">Select User Role:</option>
                <option value="Role1">Tech</option>
                <option value="Role2">Viewer</option>
                <option value="Role3">Admin</option>
            </select>
        </div>
    <br><br>
    <input class="EUsubmit" type="button" value="Create Tech" onclick="">
    <br><br>
</div>

<div id="SetPassword" class="tabcontent">
  <h3>Set a User Password</h3>
  <p>User this page to set a new User Password</p>
    <div class="SelectUser">
        <select name="User" >
            <option value="">Select User:</option>
            <option value="User1">User1</option>
            <option value="User2">User2</option>
            <option value="User3">User3</option>
            <option value="User4">User4</option>
        </select>
    </div>
    <br>
    <input type="password" name="password" placeholder="Enter New Password" maxlength="25">
    <br><br>
    <input class="EUsubmit" type="button" value="Set New Password" onclick="">
    <br><br>
</div>

所以我很困惑的是。如果我打开CreateUser选项卡，如何在该选项卡打开时创建所需的所有字段。但是，如果SetPassword选项卡打开，则需要所有这些字段并使CreateUser选项卡没有必填字段？

提前感谢您的帮助。

Answer 1

// get a reference to the active tab
var aTab;
var tabs = document.getElementsByClassName('tabcontent');
for(var i=tabs.length; i--;) if(tabs[i].classList.contains("active")) aTab = tabs[i];

if(aTab !== undefined){

    // we found the active tab, now we get the inputs
    var inputs = aTab.getElementsByTagName("input");

    // check to make sure each is not empty
    for(var i=inputs.length; i--;){
        if(inputs[i].value === ""){
           // something wasn't filled out.. do something..
        }
    }

}

但是，为每个标签使用单独的表格可能会更容易..

Answer 2

首先获取当前打开的标签的ID

var tab1 = $('.tab li a.tablinks:visible').attr('id');

然后插入您想要做的条件

if(tab1 == 'CreateUser') {
// do something
}

使用网站上的标签，如何在活动标签上创建字段？

2 个答案: