更改URL不会更改选项卡

我正在实施，如果我刷新页面，它应该使以前选择的选项卡（保留选定的选项卡）处于活动状态。所以我创建一个简单的html页面并添加一些jQuery。
但是，如果我手动更改URL像file:///home/2.html#news到file:///home/2.html#home更改URL不会更改选项卡

它改变页面的内容只，但不会改变标签上，被选中。。

这是我的代码。

<body> 
    <ul> 
     <li id="first"><a href="#home">Home</a></li> 
     <li id="second"><a href="#news">News</a></li> 
     <li id="third"><a href="#contact">Contact</a></li> 
     <li id="forth"><a href="#about">About</a></li> 
    </ul> 
    <p id="home"> 
     home section 
    </p> 
    <p id="news"> 
     news section 
    </p> 
    <p id="contact"> 
     contact section 
    </p> 
    <p id="about"> 
     about section 
    </p> 
</body> 
    <style> 
    p{ 
    display: none; 
    } 
    :target { 
    display:block; 
     border: 2px solid #D4D4D4; 
     background-color: #e5eecc; 

    } 
    </style> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     if(localStorage.getItem("active_state") == null){ 
      activeStateId = "first"; 
     } 
     else{ 
      activeStateId = localStorage.getItem("active_state") 
     } 
     $('#'+activeStateId).addClass('active'); 
     $('li').click(function(){ 
      $('.active').removeClass('active'); 
      $(this).addClass('active'); 
      localStorage.setItem("active_state", $(this).attr('id')); 
     }); 
    }); 
</script>

来源

2016-11-20 TheVinspro

可能需要在服务器上运行该页面。 localStorage是域特定的，当你使用文件协议时可能甚至不可用（尽管如此）。如果你还没有设置本地主机服务器，很容易做到，而且有很多种方法可以运行一个......所有这些都很容易研究。 Web开发很少使用文件协议完成，因为还有其他限制，例如没有ajax – charlietfl

感谢@charlietfl的回答。但我怎么能通过创建一个简单的HTML来做到这一点。 – TheVinspro

@TheVinspro你可能不能。我认为有一个标志可以启动Chrome，它可以消除对文件协议的一些限制，但一般来说，最好是使用本地服务器，正如charlietfl所建议的那样，或者使用自动开发的开发工具，就像WebStorm – hlfrmn

当你有链接哈希，你不实际重新加载页面，但浏览器只是触发这些链接。您依靠CSS :target更改规则，该规则每次在url上更改#hash时都会进行评估。

p { 
    display: none; 
} 

:target { 
    display:block; 
    border: 2px solid #D4D4D4; 
    background-color: #e5eecc; 
}

因此，即使没有刷新页面，您也可以正确更新所有部分。为了具有这种功能，您不需要将任何数据存储到本地或远程机器，因为您正在使用URL上的散列。只需使用哈希和处理hashchange事件到.activate类添加到像这样的链接：

$(document).ready(function() { 
    var hash = window.location.hash; 

    if(hash.length > 0) { 
     hash = hash.substring(1); 
     $('li a[href$='+hash+']').parent().addClass('active'); 
    } 

    $(window).on('hashchange', function() { 
     $('.active').removeClass('active'); 
     var hash = window.location.hash 
     if(hash.length > 0) { 
      hash = hash.substring(1); 
      $('li a[href$='+hash+']').parent().addClass('active'); 
     } 
    }); 
});

这里检查我的工作例如：http://zikro.gr/dbg/html/urlhash.html#about

来源

2016-11-20 23:08:25

谢谢@Christos Lytras，是的，它的工作。 – TheVinspro

@TheVinspro高兴我的答案正在为你工作。如果它对您有帮助，请将其标记为接受的答案。要了解如何将答案标记为已接受，请阅读[如何接受答案？]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）。 –

更改URL不会更改选项卡

回答

相关问题