时间戳

首页 > 解决方案 > 单击按钮时如何切换内容？

jquery - 单击按钮时如何切换内容？

问题描述

我想在点击按钮A或者BI写html的时候切换内容

  <h4>SELECT</h4>
  <div>
    <input type="radio">
    <label>A</label>
    <input type="radio">
    <label>B</label>
  </div>

如果我想切换内容

<input type="radio">
<label>A</label>

被点击，<label>a</label>被显示，如果

<input type="radio">
<label>B</label>

单击，<label>b</label>显示。我想通过使用 jQuery 来完成，但我应该如何编写代码？我对 jQuery 很陌生，所以请帮助我。

标签： jqueryhtml

解决方案

您可以尝试以下逻辑，您可以在其中显示单击的单选按钮的下一个标签。

最初隐藏所有标签并将 name="switch" 设置为单选按钮，以便一次选择一次

$(function(){
  $('input:radio[name=switch]').on('click', function(){
      $(this).siblings('label').hide();
      $(this).next('label').show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>SELECT</h4>
  <div>
    <input type="radio" name="switch">
    <label style="display:none">A</label>
    <input type="radio" name="switch">
    <label style="display:none">B</label>
  </div>

推荐阅读