Question

I’m using jQuery UI tabs, and have an image inside the anchor of each tab list item (li). What I want to happen is for the image size to be a certain size for each inactive tab, and a larger size for the single active tab. I can’t figure out how to do it. I’m not great with javascript and can’t figure out how to get the script’s if statement (see below) to be correct…all I was thinking I needed to do was to make it so that when there’s a selected tab, the image inside that tab gets the larger dimensions.

Here’s the script that I have:

 <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>

Here’s the HTML for the tabs:

  <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>

Thanks for any help!

Answer 1

Is there some reason you must do it with JS?

ul#tabs li a img {width: 90px; height: 45px;}
ul#tabs li.ui-tabs-active a img {width: 120px; height: 60px;}