Question

I have web page in which i want to slide the images problem is that when i double click on button it slides and on single click it does not slide i don’t know why this is happening.

My Java Script for sliding

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

These are the images for sliding .

        <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

You need to remove the href from your element a or move the onclick to another element.

As it is, the two “instructions” on the a element (the one designed by onclick, and the natural jump to href) are conflicting.

EDIT :

Here’s a way (with jquery) to do both the in page jump and the sliding :

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 added cursor:pointer; to let the user know the image is clickable.