Изменить изображение с помощью jQuery

Question

У меня есть html-страница, где используется jQuery-ui accordion. Теперь я должен добавить на эту страницу 2 изображение, которое должно меняться в зависимости от активного раздела. Как я могу это сделать?

HTML:

<div id="acc"> 
    <h1>Something</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 */ 
     } 
    }); 
}); 

Answer 1

Этот сценарий покажет первый IMG для первой панели, второй IMG для второй панели и так далее

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(); 
     } 
    }); 

}); 

Answer 2

Вы правильно; вам нужно поместить его в событие изменения аккордеона.

Вы можете изменить изображение, как это:

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

Answer 3

HTML:

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

JS (я предполагаю, что в ваших условиях - предположит, что вы хотите другое изображение на отображаемый аккордеон)

$(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"); 
      } 
     } 
    }); 
}); 

Если вместо этого вы хотите переключаться между двумя изображениями:

$(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(); 
      } 
     } 
    }); 
}); 

Answer 4

н моего опыт работы с изображением с changeing использованием сНа:

HTML :

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

и JQuery:

var url = "";

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

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

и с этим и может иметь много фотографий, как у, как changeing в одном DIV

PS.

если и не нравится ваш IMG неоспоримым пустой на нагрузке U может использовать

дисплей: нет;

атрибут CSS

, а затем использовать .show(); функция при нажатии в первый раз