Question

当您单击任何徽标时，它们会正确下拉，但浏览器也会跳转。当您点击任何徽标时，如何在浏览器中保持相同位置？

jQuery(document).ready(function() {

jQuery('.slick-down').click(function() {
jQuery('#hqh-logo').toggleClass('active'); 
jQuery('#hqh').slideToggle('400');
jQuery('#hqt, #scion, #best, #rent').hide();
jQuery('#hqt-logo, #scion-logo, #best-logo, #rent-logo').removeClass('active');
 });

jQuery('.slick-down2').click(function() {
jQuery('#hqt-logo').toggleClass('active'); 
jQuery('#hqt').slideToggle('400');
jQuery('#hqh, #scion, #best, #rent').hide();
jQuery('#hqh-logo, #scion-logo, #best-logo, #rent-logo').removeClass('active');    
});

jQuery('.slick-down3').click(function() {
jQuery('#scion-logo').toggleClass('active'); 
  jQuery('#scion').slideToggle('400');
jQuery('#hqt, #hqh, #best, #rent').hide();
jQuery('#hqh-logo, #hqt-logo, #best-logo, #rent-logo').removeClass('active');    
});

jQuery('.slick-down4').click(function() {
jQuery('#best-logo').toggleClass('active'); 
jQuery('#best').slideToggle('400');
jQuery('#hqt, #hqh, #scion, #rent').hide();
jQuery('#hqh-logo, #hqt-logo, #scion-logo, #rent-logo').removeClass('active');    
});

  jQuery('.slick-down5').click(function() {
  jQuery('#rent-logo').toggleClass('active'); 
 jQuery('#rent').slideToggle('400');
jQuery('#hqt, #hqh, #scion, #best').hide();
jQuery('#hqh-logo, #hqt-logo, #scion-logo, #best-logo').removeClass('active');    
  });


$(".slick-down").change(function(){
$("select").not("#style").hide();
$("#"+$(this).val()).show();
});

Answer 1

默认情况下，浏览器会跳转到散列中包含ID的元素的位置。你需要在你的javascript点击处理程序中通过修改它们来使用preventDefault()来防止这种情况，如下所示：

jQuery(".myclass").click(function(event) {
  event.preventDefault();
  // Do normal things
});

您可能还想查看difference between using preventDefault() & return false。

Answer 2

这是因为您要链接到本地锚点。例如，第一个徽标转到#hqh。

这会将页面跳转到id="hqh"元素所在的位置。

从徽标链接的href中删除目标div ID。只需使用#代替：

<a href="#"><img ...></a>

Answer 3

如果使用A元素触发，则必须执行以下操作

.click(function(e){
    e.preventDefualt();

    // Your code.
});

Answer 4

您可以使用event.preventDefault()阻止默认href被跟踪（在这种情况下，它们指向同一页面上的锚点）：

jQuery('.slick-down').click(function(event) {
    event.preventDefault();
    //run your code here
});

您还可以在事件处理程序结束时return false;这样：

jQuery('.slick-down').click(function() {
    //run your code here
    return false;
});

jQuery slidedown跳转页面

4 个答案: