html - CSS 选项卡式选择在 Chrome 中不起作用

Question

我注意到我的一个网页上的 CSS 有一种非常奇怪的行为模式。我有 5 个 div，根据是否在页面上单击相应的“选项卡”来显示/隐藏它们。页面名称将是/example.aspx，但除非我将它们重定向到/example.aspx#example-home，否则不会显示任何内容。一旦显示了#example-home div，页面就可以正常工作，用户可以选择不同的选项卡来显示不同的 div。我发现的问题是，只有在 chrome 中，当您刷新页面时，所有内容都是 display: none 即使 URL 仍然是/example.aspx#example-home。有没有人知道为什么这只会在 Chrome 中发生？

相关 CSS:

#legends-wrapper
{
float:left;
width:953px;
padding:0px;
background-image:url(/images/offers/Legends/board-bg1.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position:top center;
position:relative;
left:-20px;
top:-10px;
}
div #legends-wrapper div:not(:target)
{
display:none;
}
div #legends-wrapper div:target
{
display:block;
}
ul.legends-nav
{
float:left;
width:938px;
height:35px;
margin-left:40px;
}

ul.legends-nav li
{
float:left;
display:inline;
list-style-type:none;
width:95px;
height:35px;
margin-left:72px;
}
.KER-copy
{
clear:both;
width:700px;
margin:auto;
font-size:xx-small;
text-align:left;
background-image:url(/images/Offers/Legends/KER-logo-mini.jpg);
background-position:top-left;
background-repeat:no-repeat;
padding-left:170px;
padding-top:15px;
padding-bottom:20px;
border-bottom:1px solid #5d554e;
margin-bottom:10px;
}
.KER-legal
{
clear:both;
font-size:xx-small;
}

Answer 1

我能够通过使用 JS 将页面强制到主页 div 或他们当前使用 location.hash 查看的 div 来解决。我不确定根本问题是什么，但当用户刷新时，chrome 似乎无法识别 URL 上的散列。

Javascript:

var hasHash = false;
var currentURL = location.href;
if(currentURL.indexOf('#') >= 0){
var hash = location.hash;
hasHash = true;
}
var newURL = "/example.aspx";
var home = "#example-home";
if(hasHash){
location.href = newURL.concat(hash);
}else{
location.href = newURL.concat(home);
}