单击表单标签将重点放在错误的输入框中

我有一个表单，其中包含两个用于名和姓的输入框。单击表单标签将重点放在错误的输入框中

当我单击“姓氏”标签时，光标将按照预期聚焦在“名字”字段（而不是“姓氏”字段）。我该如何解决这个问题？

$(document).on('click', 'a', function() { 
 
    $('div.tabClass').addClass('hide'); 
 
    $($(this).attr('href')).removeClass('hide'); 
 
});

.hide { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<form action='' method='POST'> 
 
    <ul> 
 
    <li> 
 
     <a href='#first'> 
 
     First Tab 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href='#secound'> 
 
     Second Tab 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href='#third'> 
 
     third Tab 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href='#fourth'> 
 
     Fourth Tab 
 
     </a> 
 
    </li> 
 
    </ul> 
 
    <div id='first' class='hide tabClass'> 
 
    <label> 
 
     First Name : 
 
     <input type='text' name='name' id='name'> 
 
     <br/> 
 
     <label> 
 
     Last Name : 
 
     <input type="text" name='sname' id="sname"> 
 
     <input type="submit" value="Click"> 
 
    </div> 
 
</form>

来源

2014-10-11 Affan

几乎在那里。最后删除废话。格式化您的所有代码。当用英语说“我”时，它必须被大写为“I”。 – Bart 2014-10-11 09:45:15

@Affan我们不是一个代码编写服务或另一个论坛，您可以放入任何东西并期望它被解决。我们是一个符合高质量标准的网站，可以在[帮助]中了解到。如果您需要我们的帮助，请尊重我们的行为准则。 – rene 2014-10-11 09:50:50

@Affan我们不会为他人提供代码。我们提供程序员可能需要帮助的问题的答案。 – 2014-10-11 09:50:59

您需要将这些标签与输入字段关联。

<label for="name"> 
    First Name : 
    <input type="text" name="name" id="name"> 
</label> 

<label for="sname"> 
    Last Name : 
    <input type="text" name="sname" id="sname"> 
</label>

正如在评论中提到@ Sumurai8的<label>元素需要关闭标签，这是从你的代码失踪。

来源

2014-10-11 09:45:43

单击表单标签将重点放在错误的输入框中

回答

相关问题