Показать/скрыть не работает в IE8 - JQUERY

Question

Я пробовал смотреть другие вопросы, похожие на мои, но ни один из них не помог мне.

У меня есть несколько нескольких div, которые мне нужно показывать и скрывать по одному, когда пользователь нажимает на вход. Мой код хорошо работает во всех браузерах, за исключением IE8, где ничего не происходит, другими словами, divs не отображаются. Пожалуйста, помогите мне с этой проблемой?

вот мой HTML

<div id="tabbedBox"> 
        <form action="" method=""> 
         <div class="tabbed" id="selectMe"> 
          <input type="radio" target="1" id="pvl" name="radios" value="a" checked> 
          <label class="pvl" for="pvl">PVL</label> 
          <input type="radio" target="2" id="cvl" name="radios" value="b"> 
          <label class="cvl" for="cvl">CVL</label> 
          <input type="radio" target="3" id="industrial" name="radios" value="c"> 
          <label class="industrial" for="industrial">Industrial</label> 
          <input type="radio" target="4" id="distributor" name="radios" value="d"> 
          <label class="distributor" for="distributor">Distributor</label> 
         </div> 





         <div class="pvlBox tabbedContent" id="div1"> 
          <div class="select"> 
           <input type="radio" id="installed" name="radios" value="" checked> 
           <label for="installed">Installed</label> 
          </div> 
          <span>Installed</span> 
          <div class="select"> 
           <input type="radio" id="retail" name="radios" value=""> 
           <label for="retail">Retail</label> 
          </div> 
          <span>Retail</span> 
          <div class="select"> 
           <input type="radio" id="service" name="radios" value=""> 
           <label for="service">Service Station</label> 
          </div> 
          <span>Service Station</span> 
         </div> 

          <div class="cvlBox tabbedContent" id="div2" style="display:none"> 
           CVL CONTENT 
          <div class="select"> 
           <input type="radio" id="installed" name="radios" value="" checked> 
           <label for="installed">Installed</label> 
          </div> 
          <span>Installed</span> 
          <div class="select"> 
           <input type="radio" id="retail" name="radios" value=""> 
           <label for="retail">Retail</label> 
          </div> 
          <span>Retail</span> 
          <div class="select"> 
           <input type="radio" id="service" name="radios" value=""> 
           <label for="service">Service Station</label> 
          </div> 
          <span>Service Station</span> 
         </div> 
          <div class="industrialBox tabbedContent" id="div3" style="display:none"> 
           INDUSTRIAL CONTENT 
          <div class="select"> 
           <input type="radio" id="installed" name="radios" value="" checked> 
           <label for="installed">Installed</label> 
          </div> 
          <span>Installed</span> 
          <div class="select"> 
           <input type="radio" id="retail" name="radios" value=""> 
           <label for="retail">Retail</label> 
          </div> 
          <span>Retail</span> 
          <div class="select"> 
           <input type="radio" id="service" name="radios" value=""> 
           <label for="service">Service Station</label> 
          </div> 
          <span>Service Station</span> 
         </div> 

          <div class="distributorBox tabbedContent" id="div4" style="display:none"> 
           DISTRIBUTOR CONTENT 
          <div class="select"> 
           <input type="radio" id="installed" name="radios" value="" checked> 
           <label for="installed">Installed</label> 
          </div> 
          <span>Installed</span> 
          <div class="select"> 
           <input type="radio" id="retail" name="radios" value=""> 
           <label for="retail">Retail</label> 
          </div> 
          <span>Retail</span> 
          <div class="select"> 
           <input type="radio" id="service" name="radios" value=""> 
           <label for="service">Service Station</label> 
          </div> 
          <span>Service Station</span> 
         </div> 

         <br/> 


        </form> 
      </div><!--/end tabbedbox--> 

Вот код JQuery:

$('#pvl').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div1').show(); 

    }); 
    $('#cvl').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div2').show(); 
    }); 

    $('#industrial').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div3').show(); 
    }); 

    $('#distributor').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div4').show(); 
    }); 

}); 

Answer 1

I'v добавил немного больше разметки, чтобы упростить сценарий. Также изменено событие щелчка, чтобы изменить мероприятие:

Fiddle

Сценарий:

$(function() { 
    $(".js-change").on("change", function() { 
     $(".Box").hide(); 
     $("." + $(this).data("show-content")).show(); 
    }); 
}); 

Html (добавлены классы и данные-атрибуты радиокнопков):

<div id="tabbedBox"> 
    <form action="" method=""> 
     <div class="tabbed" id="selectMe"> 
      <input type="radio" target="1" id="pvl" name="radios" value="a" 
        class="js-change" data-show-content="pvlBox" checked> 
      <label class="pvl" for="pvl">PVL</label> 
      <input type="radio" target="2" id="cvl" name="radios" value="b" 
        class="js-change" data-show-content="cvlBox"> 
      <label class="cvl" for="cvl">CVL</label> 
      <input type="radio" target="3" id="industrial" name="radios" value="c" 
        class="js-change" data-show-content="industrialBox"> 
      <label class="industrial" for="industrial">Industrial</label> 
      <input type="radio" target="4" id="distributor" name="radios" value="d" 
        class="js-change" data-show-content="distributorBox"> 
      <label class="distributor" for="distributor">Distributor</label> 
     </div> 
     <div class="Box pvlBox tabbedContent"> 
      <div class="select"> 
       <input type="radio" id="installed" name="radios" value="" checked> 
       <label for="installed">Installed</label> 
      </div> <span>Installed</span> 

      <div class="select"> 
       <input type="radio" id="retail" name="radios" value=""> 
       <label for="retail">Retail</label> 
      </div> <span>Retail</span> 

      <div class="select"> 
       <input type="radio" id="service" name="radios" value=""> 
       <label for="service">Service Station</label> 
      </div> <span>Service Station</span> 

     </div> 
     <div class="Box cvlBox tabbedContent" style="display:none">CVL CONTENT 
      <div class="select"> 
       <input type="radio" id="installed" name="radios" value="" checked> 
       <label for="installed">Installed</label> 
      </div> <span>Installed</span> 

      <div class="select"> 
       <input type="radio" id="retail" name="radios" value=""> 
       <label for="retail">Retail</label> 
      </div> <span>Retail</span> 

      <div class="select"> 
       <input type="radio" id="service" name="radios" value=""> 
       <label for="service">Service Station</label> 
      </div> <span>Service Station</span> 

     </div> 
     <div class="Box industrialBox tabbedContent" style="display:none">INDUSTRIAL CONTENT 
      <div class="select"> 
       <input type="radio" id="installed" name="radios" value="" checked> 
       <label for="installed">Installed</label> 
      </div> <span>Installed</span> 

      <div class="select"> 
       <input type="radio" id="retail" name="radios" value=""> 
       <label for="retail">Retail</label> 
      </div> <span>Retail</span> 

      <div class="select"> 
       <input type="radio" id="service" name="radios" value=""> 
       <label for="service">Service Station</label> 
      </div> <span>Service Station</span> 

     </div> 
     <div class="Box distributorBox tabbedContent" id="div4" style="display:none">DISTRIBUTOR CONTENT 
      <div class="select"> 
       <input type="radio" id="installed" name="radios" value="" checked> 
       <label for="installed">Installed</label> 
      </div> <span>Installed</span> 

      <div class="select"> 
       <input type="radio" id="retail" name="radios" value=""> 
       <label for="retail">Retail</label> 
      </div> <span>Retail</span> 

      <div class="select"> 
       <input type="radio" id="service" name="radios" value=""> 
       <label for="service">Service Station</label> 
      </div> <span>Service Station</span> 

     </div> 
     <br/> 
    </form> 
</div> 
<!--/end tabbedbox-->