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>

和Firstname邮政编码等类似的代码。

的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

尝试使用jquery，语法应为

    $('.divClass').each(function(){
this.click(function(){
    $(this).toggleClass('on');
    });});

为所有div提供相同的类名以使其更容易

Answer 2

根据你的java脚本代码看起来你正在使用一个函数，当执行时突出显示整个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>

Answer 3

如果你想保持模糊和焦点，试试这个

$(".resizedTextbox").parent("div").focus(function(){$(this).toggleClass('on');});

$(".resizedTextbox").parent("div").blur(function(){$(this).toggleClass('on');});

哦，但你必须添加jquery

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

3 个答案: