通過URL上的一些div的jQuery向上滑動命令？

Question

我正在使用jQuery向上/向下的Drupal網站上的一些divs。 我想知道是否有可能將滑入命令傳遞給url上的特定div。

例domain.com/?q=node/13/#div1 &效果基本show

非常感謝您的幫助， 大衛D.

Answer 1

您可以訪問window.location.hash獲得「DIV1 &幻燈片「部分的網址。如果你在onLoad事件處理程序中這樣做，你可以隨後做任何你想要的。

這裏的一些（未測試）樣本jQuery代碼給你一個想法（在技術上它是onReady，不是的onLoad，但同樣差）：

$(function() { 
    var hash = window.location.hash; 
    var divId = hash.split('&')[0]; 
    $(divId).slideUp(); 
}); 

Answer 2

當然，你要解析的位置。哈希屬性，並確保你沒有使用哈希其他任何東西（即實際錨點）：

$(document).ready(function() { 
    if(location.hash.substr(-8) === '&slideup') { 
    $(location.hash.substr(0, location.hash.indexOf('&'))).slideUp(); 
    } 
}); 

Answer 3

感謝您的幫助。

我已經實施了Cecchi的建議，但過了一段時間後，我開始需要更多的靈活性（根據主div更改其他兩個div的類），所以我做了一些更改。

我使用了以下內容：

$(document).ready(function(){ 
    var url = window.location.pathname.split('&'); 
    var id = url[1] 
    $("#div" + id).slideDown("slow"); 
    $("#button_slide" + id).addClass('button_slide_active'); 
    $("#product_frame" + id).addClass('product_frame_active'); 
}); 

Answer 4

好了，現在因爲我開始明白這樣的邏輯，我想清理痘痘有點我的javascript代碼...

也許你可以給我一些建議。

我用下面的代碼多達DIV10，我想只有一個代碼實例有本作的所有div：

$(document).ready(function(){ 
$("#button_slide1,#link_1,#link_1_1,#link_1_2").click(function(){ 
$("#div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10").slideUp("slow"); 
$("#button_slide2, #button_slide3, #button_slide4, #button_slide5, #button_slide6, #button_slide7, #button_slide8, #button_slide9, #button_slide10").removeClass('botao-active'); 
$("#product_frame2, #product_frame3, #product_frame4, #product_frame5, #product_frame6, #product_frame7, #product_frame8, #product_frame9, #product_frame10").removeClass("product_frameactive"); 

$("#div1").slideToggle("slow"); 
$("#button_slide1").toggleClass("botao-active"); 
$("#product_frame1").toggleClass("product_frameactive"); return false; 
}); 
}); 

$(document).ready(function(){ 
$("#button_slide2,#link_2,#link_2_1").click(function(){ 
$("#div1, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10").slideUp("slow"); 
$("#button_slide1, #button_slide3, #button_slide4, #button_slide5, #button_slide6, #button_slide7, #button_slide8, #button_slide9, #button_slide10").removeClass('botao-active'); 
$("#product_frame1, #product_frame3, #product_frame4, #product_frame5, #product_frame6, #product_frame7, #product_frame8, #product_frame9, #product_frame10").removeClass("product_frameactive"); 

$("#div2").slideToggle("slow"); 
$("#button_slide2").toggleClass("botao-active"); 
$("#product_frame2").toggleClass("product_frameactive"); return false; 
}); 
}); 

$(document).ready(function(){ 
$("#button_slide3,#link_3,#link_3_1").click(function(){ 
$("#div1, #div2, #div4, #div5, #div6, #div7, #div8, #div9, #div10").slideUp("slow"); 
$("#button_slide1, #button_slide2, #button_slide4, #button_slide5, #button_slide6, #button_slide7, #button_slide8, #button_slide9, #button_slide10").removeClass('botao-active'); 
$("#product_frame1, #product_frame2, #product_frame4, #product_frame5, #product_frame6, #product_frame7, #product_frame8, #product_frame9, #product_frame10").removeClass("product_frameactive"); 

$("#div3").slideToggle("slow"); 
$("#button_slide3").toggleClass("botao-active"); 
$("#product_frame3").toggleClass("product_frameactive"); return false; 
}); 
});