我的jquery .click函数正在重新加载我的页面和我的新图像。如何阻止它重新加载页面？

Question

我的jquery .click函数正在重新加载我的页面和我的新图像。如何阻止它重新加载页面？这是一个图像库，点击缩略图可以更改主要英雄的图像。但是，每次我点击它，它都会将我带到页面顶部。这是代码：

<script type="text/javascript"><![CDATA[
jQuery(document).ready(function(){

    jQuery('.ig-one').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '0 0');
    });

    jQuery('.ig-two').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-300px 0');
    });

    jQuery('.ig-three').click(function(){
       jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-599px 0');
    });

    jQuery('.ig-four').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-898px 0');
    });

    jQuery('.ig-five').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-1200px 0');
    });

    jQuery('.ig-six').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '2px -300px');
    });

    jQuery('.ig-seven').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-299px -300px');
    });

    jQuery('.ig-eight').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-599px -300px');
    });

    jQuery('.ig-nine').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-900px -300px');
    });

    jQuery('.ig-ten').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-1200px -300px');
    });

    jQuery('.ig-eleven').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '2px -597px');
    });

    jQuery('.ig-twelve').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-299px -599px');
    });

    jQuery('.ig-thirteen').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-599px -599px');
    });

    jQuery('.ig-fourteen').click(function(){
        jQuery('#ig-display').css('background-position', '0 0');
    }, function(){
        jQuery('#ig-display').css('background-position', '-899px -599px');
    });

});
// ]]></script>

Answer 1

您需要取消该活动。

jQuery('.ig-one').click(function(){
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '0 0');
});
 ....

在你的回答中，你有：

<script>
jQuery(document).ready(function(){
   jQuery('.ig-one').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '0 0');
   });

   jQuery('.ig-two').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-300px 0');
   });

   jQuery('.ig-three').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-599px 0');
   });

   jQuery('.ig-four').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-898px 0');
   });

   jQuery('.ig-five').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-1200px 0');
   });

   jQuery('.ig-six').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '2px -300px');
   });

   jQuery('.ig-seven').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-299px -300px');
   });

   jQuery('.ig-eight').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-599px -300px');
   });

   jQuery('.ig-nine').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-900px -300px');
   });

   jQuery('.ig-ten').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-1200px -300px');
   });

   jQuery('.ig-eleven').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '2px -597px');
   });

   jQuery('.ig-twelve').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-299px -599px');
   });

   jQuery('.ig-thirteen').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-599px -599px');
   });

   jQuery('.ig-fourteen').click(function(event){
      event.preventDefault();
      jQuery('#ig-display').css('background-position', '-899px -599px');
   });

});
</script>

这应该是：

<input type="text" class="form-control" placeholder="Search by Asset ID"   
maxlength="64" class="form-control" id="imageid" name="imageid">

Answer 2

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){

jQuery('.ig-one').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '0 0');
});

jQuery('.ig-two').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-300px 0');
});

jQuery('.ig-three').click(function(event){
    event.preventDefault
   jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-599px 0');
});

jQuery('.ig-four').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-898px 0');
});

jQuery('.ig-five').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-1200px 0');
});

jQuery('.ig-six').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '2px -300px');
});

jQuery('.ig-seven').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-299px -300px');
});

jQuery('.ig-eight').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-599px -300px');
});

jQuery('.ig-nine').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-900px -300px');
});

jQuery('.ig-ten').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-1200px -300px');
});

jQuery('.ig-eleven').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '2px -597px');
});

jQuery('.ig-twelve').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-299px -599px');
});

jQuery('.ig-thirteen').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-599px -599px');
});

jQuery('.ig-fourteen').click(function(event){
    event.preventDefault
    jQuery('#ig-display').css('background-position', '0 0');
}, function(){
    jQuery('#ig-display').css('background-position', '-899px -599px');
});

});
]]></script>

Answer 3

<style><!--
/* 2 column */
.two-up { margin:0 5%; width:40%; float:left }

/* sections */
#one { width:100%; min-height:370px; background-image:url('{{media   url="wysiwyg/Images/product_education/header-service-sm.jpg"}}'); padding:130px 10% 0 10%; }
#two, #four { width:80%; margin:50px auto; }
#three { width:100%; margin:50px auto; padding:50px 0; background-color:#e0ecec; }

#video { width:560px; height:315px; }
#video-div { width:560px; margin:0 auto; }

/* text */
.top-headline { font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:56px; line-height:53px; color:#fff; max-width:390px; }
.link { text-decoration:underline; }
.head { font-family:'Montserrat', Arial, sans-serif; font-size:40px; line-height:45px; color:#000; text-align:center; text-transform:none; }
.lead-in { font-family:'Montserrat', Arial, sans-serif !important; font-size:16px !important; font-style:normal !important; line-height:25px !important; color:#4e4e4e !important; text-align:center; }
.head-left { font-family:'Montserrat', Arial, sans-serif; font-size:40px; line-height:45px; color:#000; text-align:center; text-transform:none; text-align:left; }
.lead-in-left { font-family:'Montserrat', Arial, sans-serif !important; font-size:16px !important; font-style:normal !important; line-height:25px !important; color:#4e4e4e !important; text-align:left; }
.sub-head { font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:15px; line-height:23px; color:#008ea3; text-transform:none; }
.paragraph { font-family:'Montserrat', Arial, sans-serif !important; font-size:13px !important; line-height:23px !important; color:#4e4e4e !important; font-style:normal !important; }

.quote-head { font-family:'Montserrat', Arial, sans-serif; font-size:22px; line-height:22px; color:#000; text-align:center; text-transform:none; }
.customer-quote { font-family:'Neuton', Georgia, serif; font-style:italic; font-weight:normal; font-size:21px !important; line-height:28px !important; color:#4e4e4e; text-align:center; text-transform:none; }
.quote-credit { font-family:'Montserrat', Arial, sans-serif !important; font-size:15px !important; color:#00abc8 !important; font-style:normal !important; text-align:center; margin-top:-15px !important; }
#quote-container { float:left; width:80%; margin:0 auto; }

#arrow {
background-image:url('{{media url="wysiwyg/Images/product_education/arrow-sm.png"}}');
width:46px;
height:46px;
float:left;
margin:0 3%;
}
.next {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}


.button {
  float: none;
  background-color: #008ea3;
  padding: 16px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 200px;
  margin: 10px 0;
}

#gallery {
width:90%;
margin:50px auto;
}

#gallery a { 
width: 90px;
height: 90px;
display: block;
float:left;
margin: 10px; }

.ig-one, .ig-two, .ig-three, .ig-four, .ig-five, .ig-six, .ig-seven, .ig-eight, .ig-nine, .ig-ten, .ig-eleven, .ig-twelve, .ig-thirteen, .ig-fourteen { background-image:url('{{media url="wysiwyg/Images/product_education/ig-thumb.jpg"}}'); }
#ig-display { background-image:url('{{media url="wysiwyg/Images/product_education/ig-display.jpg"}}'); width:300px; height:300px; }
#box { width:328px; padding:14px; box-shadow:1px 1px 8px #ccc; }

.ig-one { background-position:0 0; }
.ig-two { background-position:-90px 0; }
.ig-three { background-position:-180px 0; }
.ig-four { background-position:-270px 0; }
.ig-five { background-position:-360px 0; }
.ig-six { background-position:-450px 0; }
.ig-seven { background-position:-540px 0; }
.ig-eight { background-position:0 -90px; }
.ig-nine { background-position:-90px -90px; }
.ig-ten { background-position:-180px -90px; }
.ig-eleven { background-position:-270px -90px; }
.ig-twelve { background-position:-360px -90px; }
.ig-thirteen { background-position:-450px -90px; }
.ig-fourteen { background-position:-540px -90px; }

#swipe-hide { display:none; }

@media (max-width: 770px) {

#one { width:100%; min-height:180px; background-image:url('{{media url="wysiwyg/Images/product_education/header-service-mobile.jpg"}}'); padding:30px 5% 0 5%; }

/* 2 column */
.two-up { margin:0 5%; width:90%; }

/* sections */
#three { padding:50px 5%; }
#two, #four { width:95%; }

#video { width:250px; height:141px; }
#video-div { width:250px; margin:0 auto; }

/* text */
.top-headline { font-size:40px; line-height:37px; }
.head { font-size:30px; line-height:35px; }
.customer-quote { padding:0 10px; }

#quote-container { float:left; width:100%; margin:0 auto; }

#ig-display { background-image:url('{{media url="wysiwyg/Images/product_education/ig-display.jpg"}}'); width:200px; height:200px; }
#box { width:228px; padding:14px; box-shadow:1px 1px 8px #ccc; }

.hide { display:none; }

#swipe-hide { display:block; }

}
--></style>
<div id="arrow" class="next hide">&nbsp;</div>
<div style="clear: both;">&nbsp;</div>
</section>
<section id="four">
<div class="two-up">
<h2 class="head-left" style="color: #000;">Instagram</h2>
<p class="lead-in-left">Take a look at our products, see what goes on behind the scenes and so much more!</p>
<p class="paragraph" style="color: #fff !important; margin: 0; padding: 0;">OUR INSTAGRAM</p>
</div>
<div id="box" class="two-up">&nbsp;</div>
<div style="clear: both;">&nbsp;</div>
<div id="gallery">&nbsp;</div>
</section>
<p>

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){

jQuery('.ig-one').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '0 0');
    });

jQuery('.ig-two').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-300px 0');
    });

jQuery('.ig-three').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-599px 0');
});

jQuery('.ig-four').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-898px 0');
});

jQuery('.ig-five').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-1200px 0');
});

jQuery('.ig-six').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '2px -300px');
});

jQuery('.ig-seven').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-299px -300px');
});

jQuery('.ig-eight').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-599px -300px');
});

jQuery('.ig-nine').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-900px -300px');
});

jQuery('.ig-ten').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-1200px -300px');
});

jQuery('.ig-eleven').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '2px -597px');
});

jQuery('.ig-twelve').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-299px -599px');
});

jQuery('.ig-thirteen').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-599px -599px');
});

jQuery('.ig-fourteen').click(function(event){
    event.preventDefault();
    jQuery('#ig-display').css('background-position', '-899px -599px');
});

});
</script>
</p>