在单击Javascript链接之前，如何在初始页面加载时使用CSS隐藏和元素

Question

我目前有一个如下所示的网页：

我想这样做＆＃34;点击查看此属性的图库＆＃34;按钮不会在初始加载时显示，但会在单击属性链接后显示。

以下是我当前代码的示例：

    function changeImage(image, link) {
    document.getElementById('imageReplace').src = image;
    document.getElementById('linkReplace').href = link;
}

HTML：

<a href="#/" onclick="changeImage('IMAGE', 'LINK');  return false">TEXT</a>
<a href="#/" onclick="changeImage('IMAGE', 'LINK');  return false">TEXT</a>
<a href="#/" onclick="changeImage('IMAGE', 'LINK');  return false">TEXT</a>

<img src="INITALPAGELOADIMAGE" alt="Images" id="imageReplace" class="changeImageClass">

<a href="#" id="linkReplace"><span style="float: right; padding:2px;"><Button>Click to view Gallery of This Property</button></span></a>

根据我的理解，我将使用此函数来隐藏元素：

document.getElementById('element').style.display = 'none';

但我不确定如何将其用于我当前的代码。我是否使用当前函数添加它，或者这是一个单独的函数？

如果有人能够指出我正确编码的方向，我会非常感激。

非常感谢， -Kasandra

Answer 1

我认为这是您希望使用内联样式隐藏元素的特殊情况之一。这是因为加载JavaScript需要几秒钟。因此，一些用户可能会在他们第一次进入页面时看到该元素，然后看到它很快消失。

<img src="INITALPAGELOADIMAGE" alt="Images" id="imageReplace" class="changeImageClass" style="display: none;">
<a href="#" id="linkReplace" style="display: none"><span style="float: right; padding:2px;"><Button>Click to view Gallery of This Property</button></span></a>

在您的媒体资源链接中添加onclick属性

<a href="#" onclick="changeImage('IMAGE', 'LINK'); return false;">TEXT</a>

并使用以下函数显示元素

function changeImage (src, href) {
    // get a reference to the DOM elements
    var img = document.getElementById('imageReplace'),
        link = document.getElementById('linkReplace');
    // update the elements
    img.src = src;
    link.href = href;
    // show the elements
    img.style.display = '';
    link.style.display = '';
}

这是一个快速demo (updated)。

Answer 2

使用css，您可以让该块具有display: none;，然后当您使用show时，它会将显示更改为默认值（通常为display: block;）