javascript - 使用单选按钮在 div 之间切换

Question

我正在尝试在单击单选按钮时使用 jquery 显示隐藏 div。这可能是一个奇怪的问题，但我的大脑并没有深入挖掘，我知道这很容易做到。

下面是HTML

<input type="radio" value="Active Now" class="tabActive" id="active-radio1" 
/>Participations
<input type="radio" value="Not Active Now" class="tabNotActive" 
id="active-radio2" />
Droppers

<div id="tabActive" class="tab-content">

</div>
<div id="tabNotActive" class="tab-content hide">

</div>

下面是JS

$("input:radio").off().on('click',function()){
   var value = $(this).attr("class");
   $("#"+value).show();
   // I also tried
   $("#"+value).toggleClass('hide'); /*Not right way, i know :)*/
   $("#"+value+" .tab-content").toggleClass('hide')
});

由于隐藏类，我无法在 div 之间切换，但没有任何效果

注意:hide 类是由框架添加的，我无法修改它。

所以，我需要一种完美的方式来显示隐藏这些 div。

Answer 1

试试这个。

$('input[type=radio]').on('click',function()) {
  var id = $(this).attr('class'); // this is very prone to problems

  $('.tab-content').addClass('hide')
  $('#' + id).removeClass('hide');
});