javascript - 使用 css 和 javascript 突出显示单击文本框 div

Question

我正在使用以下代码突出显示用户单击的文本框的 div。我的问题是我有多个 div 和文本框，它们在单击时需要突出显示，但是如果您单击一个文本框，所有 div 都会突出显示。何时应一次突出显示一个(单击时)。

.aspx代码

    <div class="divSurname" runat="server">
                          <div id ="divLastName" class="on">

                                 <asp:TextBox class="resizedTextbox" ID="txtSurname" onfocus="ChangeStyle(this);" onblur="ToggleStyle(this);"  runat="server"></asp:TextBox>
                                 <asp:CustomValidator ID="cvSurname" runat="server" ValidateEmptyText="true" ControlToValidate="txtSurname" ErrorMessage="Please enter your Surname name." Display="Dynamic" OnServerValidate="cvSurname_ServerValidate" />

                           </div> 

                     </div>   

以及名字邮政编码等的类似代码。

JavaScript

 <script type="text/javascript">
                         function ToggleStyle(ctrl) {
                             (document.getElementById('divLastName')).className = "on";
                             (document.getElementById('divStartName')).className = "on";
                             (document.getElementById('divDateOfBirth')).className = "on";
                             (document.getElementById('divClientPostcode')).className = "on";
                         }
                         function ChangeStyle(ctrl) {
                             (document.getElementById('divLastName')).className = "off";
                             (document.getElementById('divStartName')).className = "off";
                             (document.getElementById('divDateOfBirth')).className = "off";
                             (document.getElementById('divClientPostcode')).className = "off";
                         } 
                    </script>

CSS

    #divLastName.on 
    { 
        background-color: #fff5cc; 
    } 
    #divLastName.on:hover 
    { 
        background-color: #fcd619; 
    } 
    #divLastName.off 
    { 
        background-color: #fcd619; 
    } 


    #divStartName.on 
    { 
       background-color: #fff5cc; 
     } 
     #divStartName.on:hover 
      { 
       background-color: #fcd619; 
       } 
       #divStartName.off 
        { 
          background-color: #fcd619; 
         } 

        #divDateOfBirth.on 
        { 
          background-color: #fff5cc; 
           } 
         #divDateOfBirth.on:hover 
           { 
            background-color: #fcd619; 
           } 
           #divDateOfBirth.off 
          { 
            background-color: #fcd619; 
              } 

           #divClientPostcode.on 
            { 
             background-color: #fff5cc; 
             } 
              #divClientPostcode.on:hover 
              {  
               background-color: #fcd619; 
                 } 
                  #divClientPostcode.off 
                { 
                  background-color: #fcd619; 
                   } 

在此先感谢您的帮助!

Answer 1

根据您的 java 脚本代码，您似乎正在使用一个函数，该函数在执行时会突出显示整个 div 而不是像这样使用它，您可以编写一个函数或将一个值发送到一个函数，该函数将突出显示div 你想要的。

        function ToggleStyle(ctrl) {
         (document.getElementById(ctrl)).className = "on";
        }

        html part

        <div id="divLastName">

    <asp:TextBox class="resizedTextbox" ID="txtSurname" onfocus="ChangeStyle(this);" onblur="ToggleStyle('divLastName')"  runat="server"></asp:TextBox>

</div>