在IE8中顯示/隱藏不工作 - JQUERY

Question

我試過尋找類似於我的其他問題，但沒有一個能幫助我。

我有一些多個div，我需要顯示和隱藏時，用戶點擊一個輸入。我的代碼適用於除IE8以外的所有瀏覽器，其中沒有任何事情發生，換言之，div不顯示。 請有人可以幫我解決這個問題嗎？

這裏是我的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

心中已經加入多一點的標記來簡化腳本。也改變了click事件改變事件：

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-->