Question

我创建了http://techavid.com/design/test3.html，当您加载页面时，您会看到有3张图片。太阳图像是聚焦的（彩色），而其他图像是灰色的，直到被点击。这就是图像的应用方式。

在每张图片下，您会看到一句话：第一张：太阳，第二张：飞机＆amp;第3名：Nano，但是当页面加载时，你会看到所有三个句子。如何在页面加载活动图像（太阳）下面的第一个句子时显示，而其他人不显示，它们仅在点击时显示（虽然只需要确定页面加载仅显示“1st：Sun” ）？

谢谢：）

保罗·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>

修改对不起，我还没有仔细查看你的代码。您必须将选择器从#popuptext span:not(:first)更改为#popuptext span:not(:first) a，然后才能正常工作。另请注意下面的评论。

Answer 2

您的javaScript代码通过将其样式设置为display: none来隐藏页面上的元素。

我想默认隐藏某些元素的最简单方法是通过编辑HTML或CSS文件在其上显式设置此样式。

您可能还想尝试不会影响文档流程的visibility: hidden。

Answer 3

简单的方法是将句子包装在自己的元素中（例如）并使用CSS切换它的可见性。（还有一些JavaScript）。

例如，假设图像位于具有类名imageBox的li元素中：

li.imageBox span.imageCaption {
  /* set style options */
}
li.imageBox.active span.imageCaption {
  /* use different style options */
}

Answer 4

$(document).ready(function(){ $(".planetext").hide(); $(".nanotext").hide(); }

这就是你问的问题吗？

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

4 个答案: