У меня есть 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 */
}
});
});
Этот script покажет первый 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();
}
});
});
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();
}
}
});
});
n мой опыт с изображением с изменением использования div:
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);
}
});
});
и с этим u может иметь как можно больше изображений, таких как u, как изменение в том же div
PS.
Если вам не нравится ваш img beeing empty при загрузке, вы можете использовать
дисплей: нет;
атрибут css
а затем используйте .show(); функция при первом щелчке
Вы правы; вам нужно поместить его в событие изменения аккордеона.
Вы можете изменить изображение следующим образом:
$('.change').attr('src', someUrl);