javascript - 在页面加载时显示一个句子 - 隐藏其他句子

Question

我创建了http://techavid.com/design/test3.html当您加载页面时，您会看到有 3 张图像。太阳图像已聚焦(彩色)，而其他图像在单击之前呈灰色。这就是图像的样子。

在每个图像下，您会看到一个句子，第一个:Sun，第二个:Airplane，第三个:Nano，但是当页面加载时，您会看到所有三个句子。如何做到这一点，当页面加载时，事件图像(太阳)下方的第一句话仅显示，其他句子不显示，它们仅在单击时显示(尽管这有效，只需要弄清楚页面加载仅显示“第一个:太阳” )？

谢谢:)

保罗·J.

Answer 1

如果您将前两个链接放在一个 span 中(就像您对其他两组链接所做的那样)，那么这应该可行:

$('#popuptext span:not(:first) a').hide();

建议的 HTML 看起来像这样:

<div id="popuptext">
    <span class="suntext"> <!-- add this -->
        <a href="#" rel="sun">1st:</a>
        <a href="#" rel="sun">Sun</a>
    </span> <!-- and this -->
    <span class="planetext">
        <a href="#" rel="plane">2nd:</a>
        <a href="#" rel="plane">Airplane</a>
    </span>
    <span class="nanotext">
        <a href="#" rel="nano">3rd:</a>
        <a href="#" rel="nano">Nano</a>
    </span>
</div>

• http://api.jquery.com/first-selector/
• http://api.jquery.com/not-selector/

编辑 抱歉，我没有足够仔细地查看您的代码。您必须将选择器从 #popuptext span:not(:first) 更改为 #popuptext span:not(:first) a，然后它才能正常工作。另请注意我下面的评论。