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>
助けてくれてありがとう!