Animation travaillant sur double clic pas sur un seul clic

Question

J'ai une page web dans laquelle je veux faire glisser les images problème est que lorsque je double-cliquez sur le bouton il glisse et en un seul clic, il ne glisse pas je ne sais pas pourquoi cela est passe.

Mon Java Script pour faire glisser

 <script> 
      function class1(id, newclass){ 
       myid=document.getElementById(id); 
       myid.className=newclass; 
       } 
      </script> 

    <div id="page_three" class="panel"> 
    <div class="main_heading_three">DRAXXIN</div> 
    <div class="menu"> 
      <ul> 
        <li class="stix"></li> 
        <li><a href="#page_one"><img src="image/overview.gif" /></a></li> 
        <li class="stix"></li> 
        <li><a href="#page_two"><img src="image/strategy.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#page_three" onclick="class1('img_one_slide','img_one');class1('img_two_slide','img_two');"><img src="image/draxxin_active.png"/></a></li>       <li class="stix"></li> 
        <li><a href="#page_four"><img src="image/excede.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#page_five" onclick="class1('test','img_six_2');"><img src="image/results.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/reference.gif"/></a> 
          <ul> 
          <li><a target='_blank' href="DRAXXIN-Product-Insert.pdf"><img src="image/dropdown1.png"/></a></li> 
          <li><a target='_blank' href="DRAXXIN-Product-Insert.pdf"><img src="image/dropdown2.png"/></a></li> 
          </ul> 
        </li> 
        <li class="stix"></li> 
       </ul> 
      </div> 
      <div class="rightclass_two"><img src="image/whiteslide.png"/></div> 
      <div> 
       <ul> 
        <li class="midmenu_3"><a href="#page_two"><img src="image/backward.png"/></a></li>  
        <li class="midmenu_4"><a href="#page_four"><img src="image/forward.png"/></a></li> 
       </ul> 
      </div>     
      <div class="text_paragraph_3"> 
       <p>DRAXXIN ® (<i>tulathromycin</i>) keeps working for up to 14 days.<span class="superscript">1, 2</span> 
       </p> 
      </div> 
      <div class="text_paragraph_4"> 
       A single dose of DRAXXIN ® (<i>tulathromycin</i>): 
       <ul><li>Controls and treats the four major BRD pathogens, including <i>Mycoplasma bovis</i></li> 
        <li>Decreases the total number of treatments</li> 
        <li>Reduces associated labor and treatment costs</li> 
       </ul> 

      </div> 
      <div class="text_paragraph_5"> 
       <p class="para">Pre-slaughter Withdrawal Time 18 days </p> 
       <p class="para_2">IMPORTANT SAFETY INFORMATION</p> 
       <p class="para_1">Do not use DRAXXIN in calves to be processed for veal. A pre-slaughter withdrawal time has not been determined for pre-ruminating calves. Effects on reproductive performance, pregnancy and lactation have not been determined. 
       </p> 
      </div> 
      <div class="right_text_page3"> 
      <p>With longer duration, DRAXXIN extends your PMIs or PTIs for a greater return on your investment. 
      </p> 
      </div> 
      <div class="right_text_page4"> 
      <p> 
      DRAXXIN has been shown to work with a 14-day PMI on high-risk cattle compared with other antimicrobials using a 3-day PMI<span class="superscript">7</span> 
      </p> 
      </div> 
      <div class="right_text_page5"> 
      <small> 
      <p> 
      a,b Different superscripts identify statistically different values (P=0.0005) through 208 days. 
      </p> 
      <p>*Least square means.</p> 
      </small> 
      </div> 
      <div class="right_text_page6"> 
      <p> 
      A study<span class="superscript">8</span> of DRAXXIN shows, even at 7-, 10- or 14-day 
      PTIs, extending the PTI resulted in no change to 
      treatment responses, or slight improvement 
      </p> 
      </p></div> 
      <div class="right_text_page7"> 
      <p> 
      At 7, 10 or 14 days, there were no differences in 
      mortality rate or ADG<span class="superscript">8</span> 
      </p> 
      <p> 
      (<small><i>P=0.34</i></small>) 
      </p> 
      </p> 
      </div> 

Ce sont les images de glissement.

 <div id="img_one_slide" class="img_one_in"><img src="image/graph_one.png"/></div>  
    <div id="img_two_slide" class="img_two_in"><img src="image/graph_two.png"/></div> 

<!--Draxxin page light box--> 

Answer 1

Vous devez supprimer le href de votre élément a ou déplacer le onclick vers un autre élément. En l'état, les deux "instructions" sur l'élément a (celui conçu par onclick, et le saut naturel vers href) sont contradictoires.

EDIT:

est ici un moyen (avec jquery) de faire les deux à la page par saut et le glissement:

function doThing() { 
    $('html, body').animate({ 
     scrollTop: $('a[name="page_three"]').offset().top + 'px' 
    }, 'fast'); 
    class1('img_one_slide','img_one'); 
    class1('img_two_slide','img_two'); 
} 



<li><img style="cursor:pointer;" src=... onclick="doThing();"> 

I ajouté curseur: pointeur; pour laisser l'utilisateur savoir que l'image est cliquable.