1

现在我有这个清单：

<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，具体取决于 url 的内容。

因此，例如，如果我单击信息链接，则 url 显示 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();
        }
     });
    });

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

4

3 回答 3

1

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

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

如果您希望您的代码跨浏览器工作，我建议您使用插件，因为这还没有标准化。尤其是较旧的浏览器 (IE6) 需要大量的 hack。

于 2013-05-13T15:41:35.737 回答
1

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

$(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 插件，因此请确保在使用此功能之前将脚本插入头部。

于 2013-05-13T21:20:26.513 回答
0

如果您使用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');
});
于 2013-05-13T15:58:03.033 回答