Question

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

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

对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从按钮单击按钮中删除该类。如果您需要更多详细帮助，请发布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();
});

<强> DEMO

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 FIDDLE

$("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();
 });

显示Div Onclick按钮

4 个答案: