我正在使用 jQuery UI 选项卡,并且在每个选项卡列表项 (li) 的锚点内都有一个图像。我想要发生的是每个非活动选项卡的图像大小为一定大小,单个活动选项卡的大小更大。我不知道该怎么做。我对 javascript 不是很好,无法弄清楚如何让脚本的 if 语句(见下文)正确......我想我需要做的就是做到这一点,以便当有一个选定的选项卡时,该选项卡内的图像获得更大的尺寸。
这是我拥有的脚本:
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
if( $('#tabs .ui-tabs-active').attr('active') ) {
$('.theLogo').css({'width' : '120px' , 'height' : '60px'});
}
else {
$('.theLogo').css({'width' : '90px' , 'height' : '45px'});
};
});
</script>
这是选项卡的 HTML:
<div id="tabs">
<ul>
<li><a href="#tabs-1"><img src="picture1.png" alt="Picture 1" name="photo" id="photo" class="theLogo" /></a></li>
<li><a href="#tabs-2"><img src="picture2.png" alt="Picture 2" name="photo2" id="photo2" class="theLogo" /></a></li>
<li><a href="#tabs-3"><img src="picture3.png" alt="Picture 3" name="photo3" id="photo3" class="theLogo" /></a></li>
</ul>
<div id="tabs-1">
<iframe class="resultFrame" src="http://www.fakesite123.net"></iframe>
</div>
<div id="tabs-2">
<iframe class="resultFrame" src="http://www.fakesite1234.net"></iframe>
</div>
<div id="tabs-3">
<iframe class="resultFrame" src="http://www.fakesite1235.net"></iframe>
</div>
</div>
谢谢你的帮助!