目前在学习JS, 然后有强迫症的我弄了一个自己常用的链接的收藏。具体功能就是分类。

每个分类有一个按钮，每个按钮都有对应的div内容，初始是隐藏起来的。然后用过onclick调用js方程，点击之后这个div就会显示。然后再次点击就会消失。

后来我发现如果内容太多，或者用户点开太多并且没有再次点击来隐藏所看过的。就会很冗长。。。

所以想实现一个方法，每次点击一个button，其他的不管显示着，还是隐藏着，都让他们隐藏，这样看起来就很整洁。网上找了一些方法，可能是自己太笨没怎么看懂。

一开始想到枚举，后来发现如果经常要增加内容，那要一个一个function去修改，太麻烦。既然枚举都可以用迭代来实现，所以我想到了一个比较算简单的实现方法。

以4个div为例

HTML代码部分

<button class="button button1" onclick="myFunction1()"></button>
<br>
<div id="myDIV1" style="display: none;">
</div>
<br>

<button class="button button1" onclick="myFunction2()"></button>
<br>
<div id="myDIV2" style="display: none;">
</div>
<br>

<button class="button button1" onclick="myFunction3()"></button>
<br>
<div id="myDIV3" style="display: none;">
</div>
<br>

<button class="button button1" onclick="myFunction4()"></button>
<br>
<div id="myDIV4" style="display: none;">
</div>

JavaScript代码部分

function myFunction1() {
    var div1 = document.getElementById("myDIV1");
    if (div1.style.display === "none") {
        div1.style.display = "block";
    } else {
        div1.style.display = "none";
    }
    var x;
    for (var i = 1; i <= 4; i++) {
        if (i == 1) {
            continue;
        } else {
            x = document.getElementById("myDIV"+i);
            x.style.display = "none";
        }
    }
}

function myFunction2() {
    var div2 = document.getElementById("myDIV2");
    if (div2.style.display === "none") {
        div2.style.display = "block";
    } else {
        div2.style.display = "none";
    }
    var x;
    for (var i = 1; i <= 4; i++) {
        if (i == 2) {
            continue;
        } else {
            x = document.getElementById("myDIV"+i);
            x.style.display = "none";
        }
    }
}

function myFunction3() {
    var div3 = document.getElementById("myDIV3");
    if (div3.style.display === "none") {
        div3.style.display = "block";
    } else {
        div3.style.display = "none";
    }
    var x;
    for (var i = 1; i <= 4; i++) {
        if (i == 3) {
            continue;
        } else {
            x = document.getElementById("myDIV"+i);
            x.style.display = "none";
        }
    }
}

function myFunction4() {
    var div4 = document.getElementById("myDIV4");
    if (div4.style.display === "none") {
        div4.style.display = "block";
    } else {
        div4.style.display = "none";
    }
    var x;
    for (var i = 1; i <= 4; i++) {
        if (i == 4) {
            continue;
        } else {
            x = document.getElementById("myDIV"+i);
            x.style.display = "none";
        }
    }
}

嗯，就这么多。。。
(°◡°♡).:｡