javascript - 显示 Div Onclick 按钮

Question

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

单击任何这些按钮时，应显示其内容。每个按钮（主题）的内容都是唯一的。我只有一个 div 容器。when a particular button is selected, the corresponding content is shown, and when next button is showed, the current content should be replaced by new button content, and all these should happen on Click only.

我对 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个或任意数量。所以主题名称和编号不固定。

Answer 1

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

Answer 2

用这个

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>

jQuery

$("button").click(function() {
  $(this).siblings("span").show();
});

演示

Answer 3

<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>

JS小提琴

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

Answer 4

尝试查找文本，我猜你有相同的 div id 对应于按钮文本，如

<button type="button">English</button>

然后我猜 div 是

<div id="English">English Content</div> etc.

如果是这种情况，那么你可以试试这个：

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