php - 单击表单标签聚焦到错误的输入框

Question

我有一个表单，其中包含两个输入框，分别用于输入名字和姓氏。

当我单击“姓氏”标签时，光标聚焦在“名字”字段(而不是预期的“姓氏”字段)。如何解决这个问题？

$(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>

Answer 1

您需要将标签与输入字段关联起来。

<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> 元素需要一个结束标记，但您的代码中缺少该结束标记。