0

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>

助けてくれてありがとう！

4

2 に答える 2

1

JSでやらなければならない理由はありますか？

ul#tabs li a img {width: 90px; height: 45px;}
ul#tabs li.ui-tabs-active a img {width: 120px; height: 60px;}
于 2013-02-07T23:38:12.457 に答える
1

javascriptの代わりにCSSを使用してそれを理解しました。私は次のCSSを置きます：

 .ui-state-default img {
     width:90px;
     height:45px;
 }
 .ui-state-active img {
     width:120px;
     height:60px;
 }

これが同じ問題に遭遇した人に役立つことを願っています。

このためのjavascriptソリューションを見つけた人は誰でもそれを投稿することを歓迎します！

于 2013-02-07T23:39:30.333 に答える