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

Question

I currently have a webpage that looks like this:

I would like to make it so the "Click to view Gallery of This property" button does not show on the initial load, but does show once the property links are clicked.

Here is an example of my current code:

    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>

From what I understand I will want to use to use this function to hide the element:

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

But I am unsure how to work this into my current code. Do I add this with my current function, or is this a separate function all together?

If someone could point me into the right direction of how to code this properly I would really appreciate it.

Thank you so much, -Kasandra

Answer 1

I think this is one of those exceptional cases where you want to use inline style to hide your element. This is because it takes a few seconds for the JavaScript to load. So some users may end up seeing the element when they first get on the page, then see it quickly disappear.

<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>

Add an onclick attribute to your property links,

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

And use the following function to show the elements

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 = '';
}

Here's a quick demo (updated) .

Answer 2

Using css, you can have the block have display: none; and then when you use show it will change the display to default (usually display: block; )