---
title: "Gömma alla div, förutom en"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/100315-gömma-alla-div-förutom-en"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "LeonL"
published: "2004-03-25T22:37:56.000Z"
updated: "2004-03-26T06:54:16.000Z"
replies: 1
views: 279
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/100315-gömma-alla-div-förutom-en"
---

# Gömma alla div, förutom en

## #1 — LeonL, 2004-03-25T22:37Z

Jag använder mig av flera div-block som ska fungera som "fönster".
Säg att vi har 4 rutor, som från början är gömda. Jag trycker på en länk som visar ruta 1. Nu trycker jag på länken för ruta 3, varpå ruta 1 göms och ruta 3 visas.

Hur ska man göra för att kunna uppnå detta ändamål utan att använda flera getElementByID() för varenda ruta?

Permalänk: https://www.webforum.nu/p/100315

## #2 — Cheguelin, 2004-03-26T06:54Z

Du kan kolla in den här koden. Jag skrev den för ett bra tag sedan så den är väl inte tip-top, men du kanske lär dig något utav den.

index.html

```
<html>
 <head>
  <title>Z-index</title>
  <script src="Z-index.js" type="text/javascript">
  </script>
  <style type="text/css">
	.element {
		border: 1px solid #cccccc;
		background-color: #eeeeee;
		cursor: hand;
		font-family: Verdana;
		font-size: 8pt;
		height:50px;
		position: absolute;
		text-align: center;
		vertical-align: center;
		width: 50px;
	}
  </style>
 </head>
 <body>
 </body>
</html>
```

Z-index.js

```
/*
   Window-selector 1.0

   This script is written by Peter Wengelin, alias Cheguelin.
   If you wan't to use this script on your website you'll
   need my permission. Do not alter this text under any
   circumstances. Do not share this script on your website.
 */
function createElements(n) {
    for (var i = 0; i < n; i++) {
        var element = document.createElement("div");
        element.className = "element";
        element.onmousedown = reOrganizeElements;
        element.style.left = i * 15 + 10 + "px";
        element.style.top = i * 15 + 10 + "px";
        element.style.zIndex = element.innerText = i;
        document.body.appendChild(element);
    }
}
function reOrganizeElements() {
    var clickedElement = event.srcElement;
    var elements = document.getElementsByTagName("div");
    var originalZIndex = clickedElement.style.zIndex;
    var relevantElements = [];
    for (var i = 0; i < elements.length; i++)
        if (elements[i].className == "element")
            relevantElements.push(elements[i]);
    clickedElement.style.backgroundColor = "#993333";
    clickedElement.style.borderColor = "#660000";
    clickedElement.style.color = "#ffffff";
    clickedElement.style.fontWeight = "bold";
    clickedElement.style.zIndex = clickedElement.innerText
        = relevantElements.length - 1;
    for (var i = 0; i < relevantElements.length; i++)
        if (relevantElements[i].style.zIndex >= originalZIndex
                && relevantElements[i] != clickedElement) {
            relevantElements[i].style.backgroundColor = "";
            relevantElements[i].style.borderColor = "";
            relevantElements[i].style.color = "";
            relevantElements[i].style.fontWeight = "";
            relevantElements[i].style.zIndex =
                relevantElements[i].style.zIndex - 1;
            relevantElements[i].innerText =
                relevantElements[i].style.zIndex;
        }
}
/*
   The push-method wich applies to the Array-object in
   Internet Explorer 5.5 and later versions.
 */
if (!Array.prototype.push) {
    Array.prototype.push = function() {
        for (var i = 0; i < arguments.length; i++)
            this[this.length] = arguments[i];
    };
}
document.onselectstart = function() {
    return false;
}
window.onload = function() {
    createElements(4);
}
```

Permalänk: https://www.webforum.nu/p/1310032

---

Tråden på webben: https://www.webforum.nu/amne/javascript/100315-gömma-alla-div-förutom-en
