Change image using jQuery

I have a html-page where used jquery-ui accordion. Now I have to add in this page 2 image which should vary depending on the active section. How can I do it?

HTML:

<div id="acc">
    <h1>So开发者_如何学JAVAmething</h1>
    <div>Text text text</div>
    <h1>Something too</h1>
    <div>Text2 text2 text2</div>
</div>
<div id="pic">
    <img class="change" src="1.png"/>
    <img class="change" src="2.png"/>
</div>

JS:

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            /* I'm think something need here */
        }
    });
});

HTML:

<div id="pic">
    <img id="change1" class="change" src="1.png"/>
    <img id="change2" class="change" src="2.png"/>
</div>

JS (I'm guessing at your conditions - assume you want a different image per displayed accordion)

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            if(ui.newheader == "A header") {
                $("#change1").attr("src", "new1.png");
                $("#change2").attr("src", "new2.png");
            } else if(ui.newHeader == "Another header") {
                $("#change1").attr("src", "1.png");
                $("#change2").attr("src", "2.png");
            }
        }
    });
});

If, instead, you want to toggle between the two images:

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            if(ui.newheader == "A header") {
                $("#change1").hide();
                $("#change2").show();
            } else if(ui.newHeader == "Another header") {
                $("#change1").show();
                $("#change2").hide();
            }
        }
    });
});

This script will show the first img for the first panel, the second img for the second panel and so on

jQuery(function($)
{

   $("#acc").accordion({
       change: function(event, ui) {
          var index = $(ui.newContent).index("#acc>div");

          $("#pic .change")
             // Hide all
             .hide()
             // Find the right image
             .eq(index)
             // Display this image
             .show();
       }
   });

});

You are correct; you need to put it in the accordion's change event.

You can change the image like this:

$('.change').attr('src', someUrl);

n my experience with image with changeing div use:

html:

<div id="pic"><img id="1" src=""></div>

and jQuery:

var url = "";

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
             var url = "";
            /* set immage url here */

           $('1').attr("src", url);
        }
    });
});

and with this u can have as many pictures as u like changeing in same div

PS.

if u don't like your img beeing empty on load u can use

display:none;

css attribute

and then use .show(); function when clicking first time