根据url哈希值更改可见内容 - Changing what is visible based on the url hash

现在我有这个列表:

<ul id="list">
    <li id="active"><a href="#home" id="home-link"><img src="main home page/purhome.png"></a></li>
    <li id="active"><a href="#info" id="info-link"><img src="main home page/purinfo.png"></a></li>
    <li id="active"><a href="#gyms" id="gyms-link"><img src="main home page/purgyms.png"></a></li>
    <li id="active"><a href="#contact" id="contact-link"><img src="main home page/purcontact.png"></a></li>
</ul>

这个JQuery:

$(document).ready(function(){
    $("#home-link").click(function(){
        $("#main_info2").hide();
        $("#main_info").show();
    });
    $("#info-link").click(function(){
        $("#main_info").hide();
        $("#main_info2").show();
    });
    $("#gyms-link").click(function(){
        $("#main_info").hide();
        $("#main_info2").show();
    });
    $("#contact-link").click(function(){
        $("#main_info").hide();
        $("#main_info2").show();
    });
});

当我点击主页链接时，URL显示indexp.php#home，这是我想要显示的。所有的链接都会发生这种情况。但是，如果我在点击信息链接后刷新页面，例如，main_infodiv显示，但浏览器仍然显示index.php#info。我想以某种方式读取散列以显示正确的div，这取决于url的内容。

例如，如果我点击info链接，url显示index.php#info。当我刷新它说同样的事情，但main_infodiv显示时，main_info2div应该显示。

function getHash() { 
    var hash = window.location.hash; 
    return hash.substring(1); // remove # 
}

我有那个代码。我会做这样的事吗?

if hash = 'info' // if url says index.php#info
    show main_info2
    hide main_info
if hash = nothing // So if url says index.php
    show main_info
    hide main_info2

任何想法?

编辑* *

我正在尝试做这样的事情使它工作:

var currentValue = window.location.hash.substr(1)
    $(document).ready(function() {
     $("home-link").click(function(){
        if(currentValue == "home") {
            $("#main_info2").hide();
            $("#main_info").show();
        }
     });
     $("info-link").click(function(){
        if(currentValue == "info") {    
            $("#main_info").hide();
            $("#main_info2").show();
        }
     });
    });

虽然这是不工作，有人可以检查代码吗?

你可以使用这个jQuery插件来监听哈希值的变化:

https://github.com/cowboy/jquery-hashchange

如果你想让你的代码跨浏览器工作，我建议使用插件，因为这还没有标准化。特别是旧的浏览器(IE6)需要大量的修改。

在讨论了不同的答案和问题之后，我想出了这个解决方案:

$(document).ready(function(){
 $(window).hashchange(function(){
 var hash = location.hash;
  if(window.location.hash.substr(1) == "home") {
            $("#info-container").hide();
            $("#gyms-container").hide();
            $("#contact-container").hide();
            $("#home-container").show();
        }
          else if(window.location.hash.substr(1) == "info") { 
            $("#home-container").hide();
            $("#gyms-container").hide();
            $("#contact-container").hide();
            $("#info-container").show();
        }
        else if(window.location.hash.substr(1) == "gyms") { 
            $("#home-container").hide();
            $("#info-container").hide();
            $("#contact-container").hide();
            $("#gyms-container").show();
        }
                    else if(window.location.hash.substr(1) == "contact") { 
            $("#home-container").hide();
            $("#info-container").hide();
            $("#gyms-container").hide();
            $("#contact-container").show();
        }
    $('#list a').each(function(){
     var that = $(this);
     that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
 })
 $(window).hashchange();
});

这个工作很漂亮。

这使用了上面提到的hashchange插件，所以在使用这个函数之前，请确保您将脚本插入到您的头部。

如果您使用https://github.com/cowboy/jquery-bbq:

，这里有一些代码可以帮助您入门。

$(document).ready(function(){
  $("#home-link").click(function(){
    $("#main_info2").hide();
    $("#main_info").show();
  });
  $("#info-link").click(function(){
    $("#main_info").hide();
    $("#main_info2").show();
  });
  $("#gyms-link").click(function(){
    $("#main_info").hide();
    $("#main_info2").show();
  });
  $("#contact-link").click(function(){
    $("#main_info").hide();
    $("#main_info2").show();
  });

  $(window).bind( 'hashchange', function(e) {
    url = $.deparam.fragment();
    url && $( 'a[href="#' + url + '"]' ).trigger('click');
  });
  $(window).trigger('hashchange');
});