J'utilise le code suivant pour mettre en surbrillance le div de la zone de texte sur laquelle l'utilisateur a cliqué. Mon problème est que j'ai plusieurs divs et zones de texte qui doivent être mis en évidence lorsque vous cliquez dessus, mais si vous cliquez sur une zone de texte, tous les divs sont mis en surbrillance. Quand ils doivent mettre en évidence un à la fois (lorsque vous cliquez dessus).

Code .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>   

Et code similaire pour le code postal du prénom, etc.

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

Merci d'avance pour votre aide!

0
anna 2 nov. 2011 à 20:44

3 réponses

Meilleure réponse

Sur la base de votre code de script Java, il semble que vous utilisez une fonction qui, lors de l'exécution, met en surbrillance tout le tas de div au lieu de l'utiliser comme ceci, vous pouvez écrire une fonction ou envoyer une valeur à une fonction qui mettrait en surbrillance le div que vous voulez .

        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>
0
COLD TOLD 2 nov. 2011 à 16:59

Essayez d'utiliser jquery et la syntaxe doit être

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

Donnez à tous vos divs le même nom de classe pour le rendre plus facile

0
Qchmqs 2 nov. 2011 à 16:50

Si vous voulez garder votre flou et votre concentration, essayez ceci

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

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

Ohh mais tu dois ajouter jquery

0
GregM 2 nov. 2011 à 16:54
7984055