jQuery的了slideDown跳

Question

頁

下面是該網站的鏈接：http://p7dev.com/bella

當你點擊任何的標誌，他們正確地下拉，但瀏覽器也跳下來。當您點擊任何徽標時，如何讓您在瀏覽器中的位置保持不變？

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

默認情況下，瀏覽器跳轉到與哈希標識的元素的位置。您需要防止這種情況在你的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

您可以通過使用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; 
}); 

Answer 4

如果你有一個元素觸發，你必須做以下

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

    // Your code. 
});