$(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>
工作正常一段时间然后被破坏了。我的脚本/ html错误在哪里？不确定问题出在哪里。
答案 0 :(得分：1)
您的脚本按预期工作，问题可能是由于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>