我创建了一个菜单,浏览特定页面上的幻灯片列表。
它的HTML代码如下: -
<ul class="dropdown">
<li class="orange"><a href="#" data-jumpslide="2"><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">When to do it</div><div class="clear"></div></div></a></li>
<li class="orange"><a href="#" data-jumpslide="3" ><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Key faces</div><div class="clear"></div></div></a></li>
<li class="orange"><a href="#" data-jumpslide="5" ><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Functionalities</div><div class="clear"></div></div></a></li>
</ul>
注意标签的“自定义属性”,它告诉我要浏览的幻灯片。
这个JS代码允许我这样做: -
$('a[data-jumpslide]').each(function(idx, ele){
$(ele).on('click', function(){
var slideToJump = $(this).data('jumpslide');
window.slider.go(false, slideToJump+1);
});
});
正如您所看到的那样,它获取了页面上的幻灯片编号并且只是跳过它。
幻灯片都在同一页面上,所以基本上这个代码移动幻灯片放在同一页面上,并带我去任何幻灯片。我的问题是,我现在一直试图在另一个页面上移动幻灯片。
因此,如果我点击链接移动到具有特定幻灯片编号的其他页面,我该怎么做?
感谢。
答案 0 :(得分:1)
您需要将该幻灯片值作为哈希标记传递到下一页。
页面应包含一个检查hastag值的脚本:
window.location.hash;
然后简单地将该哈希值传递给幻灯片选择器函数。
要获取href和hashtag,您只需修改当前的内容:
$('a[data-jumpslide]').each(function(idx, ele){
$(ele).on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
var slideToJump = $(this).data('jumpslide');
slideToJump++;
window.location(href+'#'+slideToJump);
});
});
然后你的目标href应该有这样的东西来捕获主题标签:
<script>
$(document).ready(function(){
var hash = window.location.hash;
window.slider.go(false, hash);
});
</script>