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');
});

Answer 2

你可以尝试这个：

$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
    });
 });

DEMO FIDDLE

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

2 个答案: