Блог

Я использую следующий код, чтобы выделить 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; 
                   } 
  

Заранее спасибо за любую помощь!

На основе вашего кода 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>
  

попробуйте использовать jquery, и синтаксис должен быть

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

дайте всем вашим divs одинаковое имя класса, чтобы упростить задачу

Если вы хотите сохранить размытие и фокус, попробуйте это

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

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

О, но вы должны добавить jquery