Javascript 单击按钮时显示Div

我有多个按钮，每个按钮显示一个主题名称。 例如：英语、数学、社交、法语等

单击这些按钮中的任何一个，都会显示其内容。 每个按钮（主题）的内容都是唯一的。 我只有一个div容器。 当选择特定按钮时，将显示相应的内容，当显示“下一步”按钮时，当前内容应替换为新的按钮内容，所有这些都应仅在单击时发生

我对java脚本和查询非常陌生，请尝试帮助我

这是我的HTML

<div id="graybox">
    <button type="button">English</button>
    <button type="button">Math</button>
    <button type="button">French</button>
    <button type="button">Social</button>
</div>

<div id="whitebox">
    on click of the subject above, respective content will be shown here, 
</div>

英语
数学
法语
社会的
单击上面的主题，相应的内容将显示在此处，

---

PS：主题将来自数据库，可以是5个主题，也可以是8个主题或任何数字。因此，主题名称和编号不是固定的。

使用display:none创建一个CSS类，并将其应用于div，然后通过Javascript单击按钮从divs中删除该类。 如果需要更详细的帮助，请发布HTML。

使用此选项

HTML

<div class="container">
    <ul>
        <li><button>English</button> <span>English Description</span></li>
         <li><button>Maths</button> <span>Maths Description</span></li>
         <li><button>Social</button> <span>Social Description</span></li>
         <li><button>French</button> <span>French Description</span></li>
    </ul>
</div>

---

尝试查找文本，我猜您的div id与按钮文本相同，如

English

那么我猜这个div是

英语内容等

如果是这种情况，您可以尝试以下方法：

 $("#graybox button").click(function() {
     var div2show = $(this).text();
     $('#whitebox').find(div2show).show().siblings().hide();
 });

---

创建

\u英语/数学/法语/社交内容

它是如何维护的？我想你错过了HTML中主题的内容。我不能用它，因为我只有一个容器，一旦我点击数学按钮，英语内容应该被数学内容替换，在同一个容器上。

<div class="container">
    <ul>
        <li><button>English</button> <span>English Description</span></li>
         <li><button>Maths</button> <span>Maths Description</span></li>
         <li><button>Social</button> <span>Social Description</span></li>
         <li><button>French</button> <span>French Description</span></li>
    </ul>
</div>
<div id="subtext">
</div>

$("button").click(function() {
 $('#subtext').html($(this).next().html());
});

 $("#graybox button").click(function() {
     var div2show = $(this).text();
     $('#whitebox').find(div2show).show().siblings().hide();
 });