Using JQuery is() to change background-image

Question

Basically, I'm trying to change my page's background-image each tab I click on a different tab. I tried using conditionals and the is() function to identify a specific tab, but I have had no luck. Is this feasible, or am I missing something? PS: I'm using jQuery 1.6.4.

HTML

  <body>
        <div id='pizza'>
            <div id='menu'>
                 <h1><p id='menuheading'>Menu</p></h1>
                <div class='tabbedmenu'>
                    <ul class='tabs'>
                        <li class='selected' id='pizzatab'>Pizza</li>
                        <li id='sandwichestab'>Sandwiches</li>
                        <li id='appetizerstab'>Appetizers</li>
                        <li id='saladstab'>Salads</li>
                        <li id='beveragestab'>Beverages</li>
                    </ul>
                </div>
                <div class='page' id='pizzatab' style='display:block'>
                    <p>yo</p>
                </div>
                <div class='page' id='sandwichestab' style='display:none'>
                    <p>hi</p>
                </div>
                <div class='page' id='appetizerstab' style='display:none'></div>
                <div class='page' id='saladstab' style='display:none'></div>
                <div class='page' id='beveragestab' style='display:none'></div>
            </div>
        </div>
    </body>
    </html>

jQuery

$(document).ready(function () {
    $('.tabs li').click(function () {
        if ($(this).is('#sandwichestab')) {
            $('#pizza').css('background-image', 'url(http://hoagiexpress.tripod.com/sitebuildercontent/sitebuilderpictures/hoagies.jpg)');
        }
    });
});

Answer 1

You can just do this also

$(this).attr('id') == 'sandwichestab'

in your click function

Your original code is also working fine check http://jsfiddle.net/raunakkathuria/46m5k/

Using JQuery is() to change background-image

Question

1 answers

solution1
2 2013-12-19 03:50:18

Using JQuery is() to change background-image

Question

1 answers

solution1 2 2013-12-19 03:50:18

solution1
2 2013-12-19 03:50:18