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

【问题标题】：Highlighting on click textbox divs with css and javascript使用 css 和 javascript 突出显示单击文本框 div
【发布时间】：2011-11-02 16:44:01
【问题描述】：

我正在使用以下代码突出显示用户单击的文本框的 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 postcode 等的类似代码。

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; 
                   }

提前感谢您的帮助！

【问题讨论】：

标签： javascript asp.net css

【解决方案1】：

根据您的 java-script 代码，您似乎正在使用一个函数，该函数在执行时突出显示整个 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>

【讨论】：

【解决方案2】：

尝试使用jquery，语法应该是

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

为所有 div 赋予相同的类名以使其更容易

【讨论】：

【解决方案3】：

如果你想保持模糊和专注，试试这个

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

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

哦，但是你必须添加 jquery

【讨论】：