使用 jQuery Cycle 在 URL 中显示 #anchor 而不是索引
为了对 Google 友好，我想稍微更改一下这个脚本。
我有一个页面布局，我使用 jQuery Cycle 在内容之间设置动画。现在的脚本在 URL 中显示当前幻灯片的编号。前任。 “index.html#1”或“index.html#4”。它看起来很糟糕，我想 Google 也会这么想...;-)
我希望它显示 div #anchor 而不是它的索引，所以 url 将是“index.html#Projects”而不是
HTML 菜单：
<div id="menu">
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#Learning">Learning</a></li>
</ul>
</div>
脚本：
//Set .active to current page link
var url = location.hash.slice(1);
if (url < 1 ) {
$("#menu li:nth-child(" + ( location.hash.slice(1) - 1 ) + ") a ").addClass("active");
}
//Slide effect
$('#logo').click(function() {
$('.slideshow').cycle(0);
return false;
});
$('#menu li a').click(function() {
$('.slideshow').cycle($(this).parent().index()+1);
return false;
});
$('.slideshow').cycle('pause');
var index = 0, hash = window.location.hash;
if (hash) {
index = /\d+/.exec(hash)[0];
index = (parseInt(index) || 1) - 1; // slides are zero-based
}
$('.slideshow').cycle({
fx: 'blindY', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 700,
startingSlide: index,
cleartype: 1,
timeout: 3000,
after: function(curr,next,opts) {
window.location.hash = opts.currSlide + 1;
}
});
是否可以使其显示 div #anchor 而不是其索引？
先感谢您... ：-）
To be Google friendly, I want to change this script a little bit.
I have a one page layout, where I use jQuery Cycle to animate between content. The script, as it is now, displays the current slide's number in the URL. Ex. "index.html#1" or "index.html#4". It looks horrible and I think Google would think too... ;-)
I want it to display the divs #anchor instead of its index, so the url would be "index.html#Projects" instead
The HTML menu:
<div id="menu">
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#Learning">Learning</a></li>
</ul>
</div>
The script:
//Set .active to current page link
var url = location.hash.slice(1);
if (url < 1 ) {
$("#menu li:nth-child(" + ( location.hash.slice(1) - 1 ) + ") a ").addClass("active");
}
//Slide effect
$('#logo').click(function() {
$('.slideshow').cycle(0);
return false;
});
$('#menu li a').click(function() {
$('.slideshow').cycle($(this).parent().index()+1);
return false;
});
$('.slideshow').cycle('pause');
var index = 0, hash = window.location.hash;
if (hash) {
index = /\d+/.exec(hash)[0];
index = (parseInt(index) || 1) - 1; // slides are zero-based
}
$('.slideshow').cycle({
fx: 'blindY', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 700,
startingSlide: index,
cleartype: 1,
timeout: 3000,
after: function(curr,next,opts) {
window.location.hash = opts.currSlide + 1;
}
});
Is it possible to make it display the divs #anchor instead of its index?
Thank you in advance... :-)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
最简单的方法是将代码行 : 更改
为：
这将处理类似以下的 URL：
http://www.........#1: #Projects。然后，您将必须浏览使用散列的其余代码，并在使用其余部分之前去掉最后一点，例如问候
尼尔
The easiest way is to change the line of code :
to:
This will proce a URL like:
http://www..........#1: #Projects. You will then have to go through the rest of the code where you use the hash and strip this last bit off before you use the remainder e.g.Regards
Neil
使其在每张幻灯片之后或之前都有一个回调，使用 Cycle
So After: Onafter,
Make it so after or before each slide it has a callback with the Cycle
So After: Onafter,