javascript - 为 url 上的某些 div 传递 jquery 上滑命令？

Question

我在 drupal 网站上使用 jquery 向上/向下滑动一些 div。我想知道是否可以将向上滑动命令传递给 url 上的特定 div。

示例 domain.com/?q=node/13/#div1&slideup

非常感谢您的帮助，David D.

Answer 1

谢谢你的帮助。

我已经实施了一段时间的 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 2

您可以访问window.location.hash以获取 URL 的“div1&slideup”部分。如果您在 onLoad 事件处理程序中执行此操作，您随后可以做任何您想做的事情。

这里有一些（未经测试的）示例 jQuery 代码给你一个想法（技术上它是 onReady，不是 onLoad，但相同的区别）：

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

Answer 3

Sure, you'll have to parse the location.hash property and make sure you aren't using the hash for anything else (i.e. actual anchors):

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

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;
});
});