Question

我有一个有趣但可能很简单的问题。我正在创建一个导航栏插入，其中有4个JS按钮，每个按钮可以隐藏一个分区，我希望每个按钮隐藏其他三个分区，同时显示其自己的分区。目前每个按钮只附加到它自己的部门，我正在寻求帮助以切换其他三个div。

经过进一步的思考，当观众第一次进入页面的时候，我也想让黑桃，心和俱乐部的div翻转。

如果您认为有更好的方法，我也对此持开放态度，我的框架是django jfyi。

干杯！

JS：

// Card Navigation Bar

function dhide() {
    var x = document.getElementById("diamonds");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
function chide() {
    var x = document.getElementById("clubs");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
function hhide() {
    var x = document.getElementById("hearts");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
function shide() {
    var x = document.getElementById("spades");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

HTML

    <button onclick="dhide()">Diamonds</button>
    <button onclick="chide()">Clubs</button>
    <button onclick="hhide()">Hearts</button>
    <button onclick="shide()">Spades</button>

<div id=diamonds>...</div>
<div id=clubs>...</div>
<div id=hearts>...</div>
<div id=spades>...</div>

Answer 1

将隐藏它们的功能怎么样，然后显示你想要的那个？

JS：

    function toggleDivs(idToShow){

        document.getElementById("diamonds").style.display = 'none';
        document.getElementById("hearts").style.display = 'none';
        document.getElementById("clubs").style.display = 'none';
        document.getElementById("spades").style.display = 'none';

        document.getElementById(idToShow).style.display = 'block';
    }
    toggleDivs('hearts');

HTML：

    <button onclick="toggleDivs('diamonds')">Diamonds</button>
    <button onclick="toggleDivs('clubs')">Clubs</button>
    <button onclick="toggleDivs('hearts')">Hearts</button>
    <button onclick="toggleDivs('spades')">Spades</button>

https://jsfiddle.net/rhoteL4t/

Answer 2

您可以提供显示/隐藏同一个类的所有元素。然后你可以做

document.getElementsByClassName

获取您想要的所有dom元素。然后，您可以遍历每个并关闭它，除非它是选定的ID。

Javascript mini Navbar插入

2 个答案: