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

在网址末尾加载#teams的网页

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

这是:target

的限制之一

如果页面加载时网址中没有哈希值，您还可以使用javasctipt / jQuery添加#teams。

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

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

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

1 个答案: