JavaScript覆盖CSS显示：无可见隐藏

Question

I have a CSS id that both hides visibility and displays: none. When I click the button I would like for it to display. However, the only way I am able to make it work is by removing the display:none. I do not want this because it is an invisible element causing design to be messed up.

Ultimately the goal is to click button, make some elements disappear and some elements appear.

Here is the HTML

<div class="fwork1" id="fwork1">

    <a href="#portfolio" onclick="fWork1()">
        <img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt=""> 
    </a>

</div>

<div id="hwork1">

    <p>some text</p>

</div>

<div id="fWorkReturn">

    <button onclick="fWorkReturn()">Click</button>

</div>

Here is the CSS

#hwork1 {
    visibility: hidden;
    display: none;
}

Here is the Javascript

function fWork1() {
    document.getElementById("fwork2").style.display = "none";
    document.getElementById("fwork3").style.display = "none";
    document.getElementById("fwork4").style.display = "none";
    document.getElementById("hwork1").style.display = "block"; 
}

function fWorkReturn() {
    document.getElementById("fwork1").style.display = "initial";
    document.getElementById("fwork2").style.display = "initial";
    document.getElementById("fwork3").style.display = "initial";
    document.getElementById("fwork4").style.display = "initial";
    document.getElementById("hwork1").style.visibility = "hidden";
}

JSFiddle

Answer 1

The best way to handle this would be to add a class when you click on you element. your js would look like this:

function fWork1() {
    document.getElementById("fwork2").classList().add('active');
}

and you CSS will look like this:

#hwork1 {
    display: none;
}

#hwork1.active {
    display: block;
}

Answer 2

Change your code like this -

 function hide() { document.getElementById("fwork2").style.visibility = ""; document.getElementById("fwork3").style.visibility = ""; document.getElementById("fwork4").style.visibility = ""; document.getElementById("hwork1").style.visibility = ""; } function show() { document.getElementById("fwork1").style.visibility = "hidden"; document.getElementById("fwork2").style.visibility = "hidden"; document.getElementById("fwork3").style.visibility = "hidden"; document.getElementById("fwork4").style.visibility = "hidden"; document.getElementById("hwork1").style.visibility = "hidden"; } 

Answer 3

This is how you can change the visibility of an element with JavaScript. The current code changes the visibility property of some elements when the function is called / button is clicked. It should be fairly straightforward how to apply this in another context.

 function hideFourAndShowSix(){ let four = document.getElementById('four'); let six = document.getElementById('six'); six.style.setProperty('visibility', 'visible'); six.style.setProperty('display', 'list-item'); four.style.setProperty('visibility', 'hidden'); } 

 #six{ visibility: hidden; display: none; } 

 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li id="four">Four</li> <li>Five</li> <li id="six">Six</li> </ul> <button onclick="hideFourAndShowSix()">Hide no. 4 and show no.6</button> 

PS: If you need extra explanation drop in a comment ;).