Проблемы с дисплеем div

Question

Эта проблема выглядит простой, поэтому mea culpa заранее, если это плохой этикет, чтобы спросить об этом.

У меня есть некоторые divs внутри div панели панели вкладок, который установлен для отображения.

<div id="fragment-5a" class="ui-tabs-panel" style="display: block;"> 
    <div id="mainpic"> 
    <img align="middle" alt="somewhere" 
    src="http://localhost/gopag3/projects/somest.jpg"></div> 
<div id="altpic"><img src="#"></div> 
<div id="mainpicblurb">texttexttext</div></div> 

Один ДИВ 'mainpic' держит IMG. Второй 'mainpicblurb' содержит текст и ссылки внутри под-div 'piclinks'. Div 'altpic' пуст и скрыт (отображение: нет), но в остальном точная копия «mainpic».

Я пытаюсь написать скрипт, который выполняет следующие действия:

1. кожсырья mainpic "
2. грейферы HREF (IMG SRC) и добавляет его в качестве IMG SRC для 'altpic'
3. шоу" altpic '

Вот что я сделал.

$(document).ready(function() { 
    $('#piclinks div a').click(function() { 
     var link = $(this).attr('href'); 
     $('#mainpic').hide(); 
     $('#altpic img').replaceWith('<img align="middle" src="' + link + '">'); 
     $('#altpic').show(); 
    return false; 
    }); 
}); 

Это не работает в целом. Хреф успешно схвачен. Img src успешно сбрасывается в «altpic» и «return false» работает нормально, но ни «mainpic», ни «altpic» не имеют нужного атрибута отображения.

Возможно, вкладки CSS переопределяют все, что я делаю, хотя смотрю на него в Firebug. Я не вижу, как это сделать.

Совершенно возможно, что приведенная выше длинная цепочка ревунов. Мой инстинкт кишки заключается в том, что процесс отбора неверен. Мне нужно пересечь DOM из #piclinks div, чтобы сохранить дерево, чтобы собрать в #mainpic и #altpic, используя parent() и siblings(), возможно.

В любом случае, предложения/понимание критики приветствуются.

Том

Answer 1

CSS скрытие для данного идентификатора может быть проблемой. Попробуйте добавить класс скрытым для altpic:

<div id="fragment-5a" class="ui-tabs-panel" style="display: block;"> 
    <div id="mainpic"> 
    <img align="middle" alt="somewhere" 
    src="http://localhost/gopag3/projects/somest.jpg"></div> 
<div id="altpic" class="is-hidden"><img src="#"></div> 
<div id="mainpicblurb">texttexttext</div></div> 

продожайте удалить класс, чтобы получить DIV видимую:

$(document).ready(function() { 
    $('#piclinks div a').click(function() { 
     var link = $(this).attr('href'); 
     $('#mainpic').hide(); 
     $('#altpic img').attr({'align':"middle",'src':link}); 
     $('#altpic').removeClass('is-hidden') 
    return false; 
    }); 
}); 

в CSS оных:

.is-hidden {display:none;} 

и удалить дисплей: нет; для #altpic

Answer 2

Вы должны использовать

$('#mainpic img').hide(); 
    $('#altpic img').show(); 

иначе вы скрытие/показ DIV