jQuery:哈希之前的绝对路径名
jQuery: absolute pathname before hash
我目前在我设置的哈希更改函数和jQuery mobile(用于滑动页面过渡)之间遇到了一些冲突。
为了演示一下,这是我服务器上的一个独立演示:http://nealfletcher.co.uk/transition/
单击transition click
,该页面将滑动到其中,因为它应该并相应地附加URL:/transition/news
。
这就是问题所在,单击news hash click
,这将触发我的哈希更改函数并加载相关的div,但网址不是这样:/transition/news/#news-01
url 呈现得如此/transition/#news-01
这会导致导航到 url 时出现问题。
有没有办法强制在哈希之前添加/news/
,所以我得到/transition/news/#news-01
而不是/transition/#news-01
?
相关的jQuery如下,是否可以在哈希之前附加/news/
?
任何建议将不胜感激!
j查询:
$(document).ready(function () {
$(window).hashchange(function () {
var hash = location.hash;
if (hash) {
var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
if (element) showDetail(element);
}
});
$(document).ready(function () {
$(document).hashchange();
var $container = $('#main-grid, #news-grid');
$(function () {
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.grid-block, .grid-break, .hidden',
animationEngine: 'best-available',
filter: '*:not(.hidden), .grid-block',
masonry: {
columnWidth: 8,
gutterWidth: 25
}
});
});
});
$(".click-block").click(function () {
document.location.hash = $(this).attr('data-hook');
});
});
function showDetail(element) {
var newHeight = $('#post-' + element.attr('data-hook')).height();
$('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
$('#post-' + element.attr('data-hook')).css('height', newHeight);
element.children('.up-arrow').fadeIn('slow');
setTimeout(function () {
$('html, body').animate({
scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
}, "slow");
}, 1500);
$('#main-grid').isotope();
$('#news-grid').isotope();
}
只需在数据钩子属性中添加该部分即可。因此,对于您的新闻链接,它们将以新闻/为前缀data-hook="news/news-01"
现在,我建议您考虑使用类似 http://backbonejs.org/#Router 的东西来执行您正在做的事情。或者至少看看 https://github.com/browserstate/history.js/
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- AngularJS:获取链接中没有哈希的查询字符串值
- 如何在Google chrome安全首选项文件中创建扩展安全哈希代码
- 如何在浏览器重新加载时保存位置哈希状态
- jQuery scrollTop-哈希错误
- 动态添加哈希标记;t工作
- 在Javascript中实现对哈希值的暴力攻击
- 如何在JavaScript/Node中计算SHA256哈希和Base64字符串编码
- 使用Javascript/jQuery以编程方式将当前锚点/哈希/片段附加到任何表单操作url
- 可以在React Native中制作一个自哈希应用程序
- 重定向不带哈希的URL-Ember.JS
- 正在测试主干事件哈希
- JavaScript对象作为哈希?复杂性是否大于O(1)
- 如何在JavaScript中实现哈希表
- 如何根据传入的哈希标签发送PHP请求
- 在我的图库(jQuery)中使用箭头导航时,更改URL中的哈希
- 哈希被推到猫鼬模型上作为'[对象对象]”;
- 哈希和数字
- jQuery:哈希之前的绝对路径名