Question

我有一堆按钮，有些显示为隐藏。单击显示的按钮时，它们应该被隐藏，并且应该显示一些隐藏按钮。不幸的是，只有显示的按钮被隐藏了。隐藏的按钮不会出现。

我为按钮尝试了不同的显示类型，但是实际上我什么也没有html，CSS或Javascript来知道我在做什么，或者我是否正在做任何更改。

html：

hideGenres();

function proudCondfidentResults() {
  hideFeelings();
  showIndustrialGothicButton();
  showMetalButton();
}

function powerfulPumpedResults() {
  hideFeelings();
}

function showIndustrialGothicButton() {
  document.getElementById("industrialGothic").style.display = "block";
}

function showMetalButton() {
  document.getElementById("metal").style.display = "block";
}

function hideFeelings() {
  document.getElementById("feelingButtons").style.display = "none";
}

function hideGenres() {
  document.getElementById("genreButtons").style.display = "none";
}

button {
  font-family: 'Work Sans', sans-serif;
  font-size: 24px;
  background-color: #279;
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 0.5%;
  margin-bottom: 0.5%;
  display: block;
  height: 20%;
  width: 49%;
  float: left;
}

button:hover {
  background-color: #38a;
}

<div id="feelingButtons">
  <button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button>
  <button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button>
</div>

<div id="genreButtons">
  <button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button>
  <button id="metal" onclick="metalLink()">Metal</button>
</div>

当单击Proud/Confident按钮时，我希望Proud/Confident和Powerful/Pumped按钮消失，并且出现Industrial/Gothic和Metal按钮。当前发生的情况是Proud/Confident和Powerful/Pumped按钮消失了，但是Industrial/Gothic和Metal按钮保持隐藏。如何使Industrial/Gothic和Metal按钮显示出来？

Answer 1

您需要更改genreButtons div的显示样式

hideGenres();

function proudCondfidentResults() {
  hideFeelings();
  industrialGothicLink();
  showMetalButton();
}

function powerfulPumpedResults() {
  hideFeelings();
}

function industrialGothicLink() {
  document.getElementById("industrialGothic").style.display = "block";
}

function showMetalButton() {
  document.getElementById("metal").style.display = "block";
}

function hideFeelings() {
  document.getElementById("feelingButtons").style.display = "none";
  //changed here
  document.getElementById("genreButtons").style.display = "block";
}

function hideGenres() {
  document.getElementById("genreButtons").style.display = "none";
}

button {
  font-family: 'Work Sans', sans-serif;
  font-size: 24px;
  background-color: #279;
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 0.5%;
  margin-bottom: 0.5%;
  display: block;
  height: 20%;
  width: 49%;
  float: left;
}

button:hover {
  background-color: #38a;
}

<div id="feelingButtons">
  <button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button>
  <button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button>
</div>

<div id="genreButtons">
  <button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button>
  <button id="metal" onclick="metalLink()">Metal</button>

Answer 2

尝试默认通过CSS隐藏“类型按钮” div（显示：无）。单击“骄傲/自信”后，genreButtons div将根据需要显示。这样，流派div中的所有元素都将一起切换。

<html><body>
<style>
    button {
        font-family: 'Work Sans', sans-serif;
        font-size: 24px;
        background-color: #279;
        color: #fff;
        border: 0;
        border-radius: 3px;
        cursor: pointer;
        margin-right: 0.5%;
        margin-bottom: 0.5%;
        display: block;
        height: 20%;
        width: 49%;
        float: left;
    }

    button:hover {
        background-color: #38a;
    }

    #genreButtons {
        display: none;
    }
</style>

<script>
    hideGenres();

    function proudCondfidentResults() {
        hideFeelings();
        showIndustrialGothicButton();
        showMetalButton();
    }

    function powerfulPumpedResults() {
        hideFeelings();
    }

    function showIndustrialGothicButton() {
        document.getElementById("industrialGothic").style.display = "block";
    }

    function showMetalButton() {
        document.getElementById("genreButtons").style.display = "block";
    }

    function hideFeelings() {
        document.getElementById("feelingButtons").style.display = "none";
    }

    function hideGenres() {
        document.getElementById("genreButtons").style.display = "none";
    }
</script>

<div id="feelingButtons">
    <button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button>
    <button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button>
</div>

<div id="genreButtons">
    <button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button>
    <button id="metal" onclick="metalLink()">Metal</button>
</div></body></html>

隐藏在Javascript中后按钮不显示

2 个答案: