Question

现在我有这个清单：

<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_info div，但浏览器仍然显示index.php #info。我想以某种方式阅读哈希，以显示正确的div，具体取决于网址的内容。

因此，例如，如果我点击信息链接，网址会显示index.php #info。当我刷新它说同样的事情，但main_info div显示什么时候应该显示main_info2 div。

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();
        }
     });
    });

虽然这不起作用，但有人可以查看代码吗？

Answer 1

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

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

如果您希望代码跨浏览器工作，我建议使用插件，因为这尚未标准化。特别是旧版浏览器（IE6）需要大量黑客攻击。

Answer 2

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

$(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插件，因此请确保在使用此函数之前将脚本插入到您的脑中。

Answer 3

如果您使用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');
});

根据url哈希更改可见内容

3 个答案: