链接到jquery滑块的特定幻灯片 [英] Link to a particular slide of a jquery slider

问题描述

所以我正在使用非常基本的 jQuery滑块(请参阅 喜欢 能够做的是允许访问者从网站的另一页面上单击幻灯片B"，该页面会链接到包含滑块的页面，然后显示幻灯片B.

So I'm using a very basic jquery slider (see a sample in action on this JSFiddle). I can click on links ("Slide A," "Slide B," "Slide C") on the page with the content slider to slide between the slides. What I would like to be able to do is allow a visitor to click on "Slide B" from another page on the website, which would link to the page containing the slider, and then show Slide B.

也许诸如此类的哈希标签或链接中的锚之类的内容可能会触发包含内容滑块的页面上Javascript中的某些内容，从而使幻灯片B出现:

Perhaps something like some sort of hash tag or anchor in the link like this could trigger something in the Javascript on the page containing the content slider to make Slide B appear:

<a href='slidepage.php#slide2>Slide B</a>

我正在使用的内容滑块脚本非常简单&很小，所以我假设我可以在脚本中添加一些基本内容，以识别单击以拖动幻灯片的方式:

The content slider script I'm using is incredibly simple & small, so I'm assuming there's something basic I could add to the script that would recognize a click through to pull a slide:

$(document).ready(function (){
$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });
});    

});

同样，请参见 JSFiddle在这里-随时分叉并帮助一个家伙出来！

Again, see the JSFiddle in action here - feel free to fork and help a guy out!

预先感谢... 克里斯

Thanks in advance... Chris

推荐答案

$(document).ready(function (){
  ...
  your old code
  ...

  if(window.location.hash) {
    // Fragment exists
    var myhash = window.location.hash.substring(1);
    $("a[rel='" + myhash + "']").click();
  }
});

然后使用片段链接到幻灯片: http://yourhost.com/path/to/page.html#2

Then use fragments to link to a slide: http://yourhost.com/path/to/page.html#2

更新:在选择器中使用#之前，已将其从片段中删除.

Update: Removed # from fragment before using it in the selector.

这篇关于链接到jquery滑块的特定幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！