JavaScript - 隐藏所有其他 div

Question

I've a number of divs that are only visible after clicking a link. How to close all open divs so that only the clicked one is visible?
I'm using this .js:

    function showhide(id){
        if (document.getElementById) {
        var divid = document.getElementById(id);
        divid.style.display = (divid.style.display=='block'?'none':'block');
        } }

        <a href="javascript:void(null)" onclick="showhide('features');">features</a>
<a href="javascript:void(null)" onclick="showhide('design');">design</a>
<a href="javascript:void(null)" onclick="showhide('create');">create</a>

Thanks Uli

Answer 1

One way is to add a class and seek the elements based on that to hide them ( as shown in other answers )

An alternative is to store the state of the elements in an object and use that to identify the open ones that need closing..

var divState = {}; // we store the status in this object
function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);

        divState[id] = (divState[id]) ? false : true; // initialize / invert status (true is visible and false is closed)
        //close others
        for (var div in divState){
            if (divState[div] && div != id){ // ignore closed ones and the current
                document.getElementById(div).style.display = 'none'; // hide
                divState[div] = false; // reset status
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}

Demo at http://jsfiddle.net/gaby/LfzYc/

Answer 2

You can use document.getElementByTagName to retrieve all divs.

Then iterate over them and for each one set the style to block if it's the div obtained from getElementById before, or none otherwise.

(I suggest to add a class to all the divs relevant here, and only consider the divs with this class during the iteration, so that unrelevant parts of the page won't be affected.)

Answer 3

The following code will hide all div and show the one you click on...

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hideable");
          for(var div in divs) {
             div.style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

<a href="#" onclick="showhide('features');" >features</a>
<a href="#" onclick="showhide('design');"  >design</a>
<a href="#" onclick="showhide('create');" >create</a>

<div class="hideable" id="features">Div 1</div>
<div class="hideable" id="design">Div 2</div>
<div class="hideable" id="create">Div 3</div>

I also added the return false; to preven the link's default behavior. It's cleaner and easier to understand than using javascript:void(null) on the link's href attribute. Does it solve your issue?

Answer 4

The IDs or Class name of the div could be updated on a temporary array and a simple if condition would help. A similar snippet that worked for me in my usecase.

var screens = ["screen_splash","screen_login","screen_register","route_getotp","route_loginvalidate","route_inputotp","screen_dashboard","screen_search","screen_cart","screen_myaccount"];

function changescreen(screen)
{
    screens.forEach(function(value)
    {
        if(value == screen){
            $("#"+value).show();
        }else{
            console.log("Disable Screen : " +value);
            $("#"+value).hide();
        }
    });

}

Note: Remember to change # to . based on the usage of id or class name on your code.

Answer 5

Using a classname is the typical way to do this but I'd recommend to use a lib like jquery/rightjs/whateveryoulike to do this; because: getElementsByClassName() is not supported by < IE9 and querySelectorAll() not supported by < IE8. If you can not use a lib, then you would need to iterate over all divs via getElementsByTagName("div") and check for that class.