jQueryのテーブル要素

Question

$(document).ready(function() { 
 
    $('#ot2').on('click', function() { 
 
    $('#oi1').hide(); 
 
    $('#ot1').css('background-color', 'transparent'); 
 
    $('#oi2').show(); 
 
    $('#ot2').css('background-color', '#C4C4C4'); 
 
    $('#oi3').hide(); 
 
    $('#ot3').css('background-color', 'transparent'); 
 
    $('#oi4').hide(); 
 
    $('#ot4').css('background-color', 'transparent'); 
 
    }); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 

 
<table cellspacing=0 cellpadding=0> 
 
    <tr> 
 
    <td style="vertical-align:top"> 
 
     <div id="ot1" class="oTankPreviews" style="background:#C4C4C4"> 
 
     <div class="tp-vals-a">Tank 1<br><br>{{x.o1Product}} FT</div> 
 
     <div class="tp-vals-b"> 
 
      <div class="tp-vals-b-wrapper"> 
 
      <div class="ltp-fill" style="height:40px"> </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div id="ot2" class="oTankPreviews"> 
 
     <div class="tp-vals-a">Tank 2<br><br>{{x.o2Product}} FT</div> 
 
     <div class="tp-vals-b"> 
 
      <div class="tp-vals-b-wrapper"> 
 
      <div class="ltp-fill" style="height:60px"> </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div id="ot3" class="oTankPreviews"> 
 
     <div class="tp-vals-a">Tank 3<br><br>{{x.o3Product}} FT</div> 
 
     <div class="tp-vals-b"> 
 
      <div class="tp-vals-b-wrapper"> 
 
      <div class="ltp-fill" style="height:56px"> </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div id="ot4" class="oTankPreviews"> 
 
     <div class="tp-vals-a">Tank 4<br><br>{{x.o4Product}} FT</div> 
 
     <div class="tp-vals-b"> 
 
      <div class="tp-vals-b-wrapper"> 
 
      <div class="ltp-fill" style="height:40px"> </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    <td style="width:25%; vertical-align:top;background:#C4C4C4"> 
 
     <div id="oi1"> 
 
     <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"> 
 
      <div class="tp-vals-b-wrap"> 
 
      <div class="ltp-fill-large" style="height:470px"></div> 
 
      </div> 
 
     </div> 
 
     <center> 
 
      <font size=60>TANK 1</font> 
 
     </center><br> 
 
     <center> 
 
      <font size=60>{{x.o1Product}} FT</font> 
 
     </center> 
 
     </div> 
 
     <div id="oi2" style="display: none; "> 
 
     <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"> 
 
      <div class="tp-vals-b-wrap"> 
 
      <div class="ltp-fill-large" style="height:470px"></div> 
 
      </div> 
 
     </div> 
 
     <center> 
 
      <font size=60>TANK 2</font> 
 
     </center><br> 
 
     <center> 
 
      <font size=60>{{x.o2Product}} FT</font> 
 
     </center> 
 
     </div> 
 
     <div id="oi3" style="display: none; "> 
 
     <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"> 
 
      <div class="tp-vals-b-wrap"> 
 
      <div class="ltp-fill-large" style="height:470px"></div> 
 
      </div> 
 
     </div> 
 
     <center> 
 
      <font size=60>TANK 3</font> 
 
     </center><br> 
 
     <center> 
 
      <font size=60>{{x.o3Product}} FT</font> 
 
     </center> 
 
     </div> 
 
     <div id="oi4" style="display: none; "> 
 
     <div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"> 
 
      <div class="tp-vals-b-wrap"> 
 
      <div class="ltp-fill-large" style="height:470px"></div> 
 
      </div> 
 
     </div> 
 
     <center> 
 
      <font size=60>TANK 4</font> 
 
     </center><br> 
 
     <center> 
 
      <font size=60>{{x.o4Product}} FT</font> 
 
     </center> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

のためのonClickを活性化していないが、その後逮捕しばらくうまく働きました。スクリプト/ htmlエラーはどこにありますか？問題がどこにあるかわからない

Answer 1

期待どおりスクリプトが動作している

、問題は単に使用するURLを変更し、ブラウザが安全でないと認識により、HTTPプロトコルである可能性があります。https

$(document).ready(function(){ 
 
$('#ot2').on('click',function(){ 
 
    $('#oi1').hide(); 
 
    $('#ot1').css('background-color', 'transparent'); 
 
    $('#oi2').show(); 
 
    $('#ot2').css('background-color', '#C4C4C4'); 
 
    $('#oi3').hide(); 
 
    $('#ot3').css('background-color', 'transparent'); 
 
    $('#oi4').hide(); 
 
    $('#ot4').css('background-color', 'transparent'); 
 
}); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
    
 
    <table cellspacing=0 cellpadding=0> 
 
     <tr> 
 
      <td style="vertical-align:top"> 
 
       <div id="ot1" class="oTankPreviews" style="background:#C4C4C4"><div class="tp-vals-a">Tank 1<br><br>{{x.o1Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:40px"> </div></div></div></div> 
 
       <div id="ot2" class="oTankPreviews"><div class="tp-vals-a">Tank 2<br><br>{{x.o2Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:60px"> </div></div></div></div> 
 
       <div id="ot3" class="oTankPreviews"><div class="tp-vals-a">Tank 3<br><br>{{x.o3Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:56px"> </div></div></div></div> 
 
       <div id="ot4" class="oTankPreviews"><div class="tp-vals-a">Tank 4<br><br>{{x.o4Product}} FT</div><div class="tp-vals-b"><div class="tp-vals-b-wrapper"><div class="ltp-fill" style="height:40px"> </div></div></div></div> 
 
      </td> 
 
      <td style="width:25%; vertical-align:top;background:#C4C4C4"> 
 
       <div id="oi1"><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 1</font></center><br><center><font size=60>{{x.o1Product}} FT</font></center></div> 
 
       <div id="oi2" style="display: none; "><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 2</font></center><br><center><font size=60>{{x.o2Product}} FT</font></center></div>    
 
       <div id="oi3" style="display: none; "><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 3</font></center><br><center><font size=60>{{x.o3Product}} FT</font></center></div>    
 
       <div id="oi4" style="display: none; "><div style="height:1000px; border-style:solid; border-width:4px; margin-left:20px;position:relative"><div class="tp-vals-b-wrap"><div class="ltp-fill-large" style="height:470px"></div></div></div><center><font size=60>TANK 4</font></center><br><center><font size=60>{{x.o4Product}} FT</font></center></div>          
 
      </td> 
 
     </tr>