隐藏在Javascript中后按钮不显示

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 个解决方案

解决方案1
0 2019-01-06 03:04:49

解决方案2
0 2019-01-06 03:09:18

隐藏在Javascript中后按钮不显示

问题描述

2 个解决方案

解决方案1 0 2019-01-06 03:04:49

解决方案2 0 2019-01-06 03:09:18

解决方案1
0 2019-01-06 03:04:49

解决方案2
0 2019-01-06 03:09:18