默认情况下，HTML5 标签页中的目标选择器不会显示内容

Question

我相信有一个简单的解决方案，但由于某种原因，我无法获得#teams ID来显示文本：这是一个默认的小队相反，我必须点击其中一个单词才能显示文本。

有人能告诉我如何默认显示团队id及其内容吗？

<div class="sports">
    <a href="#teams" id="teams">
        Team
        <div>
            <p>This is a squad...</p>
        </div>
    </a>
    <a href="#athletes" id="athletes">
        Athletes
        <div>
            <p>This is a guy..</p>
        </div>
    </a>
    <a href="#coaches" id="coaches">
        Coaches
        <div>
            <p>This is an old man...</p>
        </div>
    </a>
</div>

和CSS：

div.sports {
    position: relative;
    font-size: 0; display:block;
}

div.sports > a {
    display: inline-block;
    padding: .5em;
    font-size: 16px;
    color: #8D8D8D;
    text-decoration: none;
    line-height: 1em;
}
div.sports > a + a {
    margin-left:10px;
}
div.sports > a:target {
    color:#33CCFF;
}
div.sports > a > div {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    display: none;
    color: #8D8D8D;
}
div.sports > a:target > div {
    display: block;
}

div.sports > a:target > div {
    display: block;
}

http://jsfiddle.net/ED6cH/196/

Answer 1

在Url 末尾加载带有#teams的页面

http://fiddle.jshell.net/ED6cH/196/show/#teams

这是:target 的局限性之一

如果页面加载时url中没有散列，也可以使用javasctipt/jQuery添加#teams。

要使用javasctipt执行此操作，请在脚本标记中添加以下内容

if(window.location.hash == null || window.location.hash = ""){
    window.location.hash = "#teams";
}