当前位置：文江博客话题详情

如何实现完整的ajax导航？

发布于 2024-10-25 16:36:33 字数 311 浏览 3 评论 0原文

我有一个问题。

我访问了一个网站：http://currenthiphop.com/。当我单击链接时，地址栏上的链接更改为 http://currenthiphop.com/#!/ + 链接。（如 Twitter、Faceboook...）

但是，在属性 href 中，没有 #!。为什么？

是 ajax 导航不是吗？我怎样才能做这样的事情？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我们只是彼此的过ke 2024-11-01 16:36:33

它是 location.hash。就像 Facebook 一样，它是用 javascript 制作的。它用于避免使用 GET 并重新加载页面。

基本示例 - 在 php 页面和 JavaScript 的文件夹中，您有一些图像（1.png、2.png）。 png...等）。就像 Facebook（前段时间）一样，如果您复制链接并粘贴它，js 会检查是否有任何哈希值并将您重定向到所需的图像。代码很旧，而且不是最好的。

回复收藏 0 原文

帅气称霸 2024-11-01 16:36:33

这应该让你开始。

http://jsfiddle.net/f6dBV/

编辑 - jsFiddle实际上没有显示location.hash 位。这是我的网站： http://jfcoder.com/test/hash.html

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    $('#home').show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;
    });
});

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>

This oughta get you started.

http://jsfiddle.net/f6dBV/

EDIT - jsFiddle is actually not showing the location.hash bit. Here it is on my website: http://jfcoder.com/test/hash.html

<html>
<head>
<style type="text/css">
.content {
    display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    $('#home').show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;
    });
});

</script>
</head>
<body>
<div id="menu">
    <a href="home.html">Home</a> -
    <a href="one.html">One</a> -
    <a href="two.html">Two</a> -
    <a href="three.html">Three</a>
</div>
<div id="home" class="content">
    Home content.
</div>
<div id="one" class="content">
    One content.
</div>
<div id="two" class="content">
    Two content.
</div>
<div id="three" class="content">
    Three content.
</div>
</body>
</html>

回复收藏 0 原文

郁金香雨 2024-11-01 16:36:33

感谢贾里德·法里什。

我有一个额外的补充，可以让您在刷新页面后获取活动内容。

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    active_page = location.hash.substring(location.hash.lastIndexOf('/')+1)
    if (active_page=='')
    {
        active_page='home'
    }
    $('#'+active_page).show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;

Thanks to Jared Farrish.

I have one little extra addition that will allow you to get the active content after you refresh the page.

$(document).ready(function(){
    $('#menu a').each(function(){
        id = $(this).attr('href');
        id = id.substring(id.lastIndexOf('/'));
        id = id.substring(0,id.indexOf('.'));
        $(this).attr('rel',id);
    });
    active_page = location.hash.substring(location.hash.lastIndexOf('/')+1)
    if (active_page=='')
    {
        active_page='home'
    }
    $('#'+active_page).show();
    $('#menu a').click(function(e){
        e.preventDefault();
        $('.content').hide();
        $('#'+$(this).attr('rel')).show();
        location.hash = '#!/'+$(this).attr('rel');
        return false;

回复收藏 0 原文

~没有更多了~