Javascript / CSS - применить стиль CSS при нажатии несвязанного элемента

0

Javascript newbie question: у меня есть галерея изображений css, использующая якоря в неупорядоченном списке:

<div id="gallery">
<ul id="gallery-interior">

<li id="one"><img src="../images/intro.jpg" usemap="#gallerymap"><map name="gallerymap">
<area shape="circ" coords="429,157,30" href="#two"></li>

<li id="two"><img src="../images/detail.jpg" usemap="#gallerymap_2"><map name="gallerymap_2">
<area shape="circ" coords="50,157,30" href="#one">
<area shape="circ" coords="429,157,30" href="#three"></li>

</ul>
</div>


#gallery {
width: 484px;
overflow: hidden;
height: 410px;
}

#gallery-interior {
overflow-y: hidden;
}

#gallery-interior li {
width: 484px;
height: 410px;
}

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

<div class='thumbs'>
<a href="#one"><img src="../images/intro_thumb.jpg"></a>
<a href="#two"><img src="../images/detail_thumb.jpg"></a>
</div>

Эти большие пальцы стилизованы для изменения при выборе:

.thumbs a:active img,
.thumbs a:focus img,
{
opacity:0.65;
-moz-opacity:0.65;
filter:alpha(opacity=65;
)

Большие пальцы отвечают на выбор, изменяя непрозрачность, но я бы хотел, чтобы они также изменились в ответ на щелчок по ссылкам в списке, т.е. Нажав <a href="#two"> на <li id = "one"> вызвать 'detail_thumb.jpg', чтобы стать непрозрачным.

Есть ли простое решение javascript для применения класса ".thumbs a: active/focus img" при нажатии ссылок на список ('<li id = "one"> <a href="#two"> <img src= "../images/intro.jpg ">" </a> </li> ')? Css предпочтительнее, но комбинаторы, по-видимому, не применимы из-за отсутствия каких-либо зависимостей между галереей и эскизами (и абсолютно позиционированное решение нежелательно).

Если вы чувствуете, что можете ответить на этот вопрос, пожалуйста, предоставьте кодированный пример вашего решения, так как я задал этот вопрос ранее и получил только непрерывные прозаические комментарии относительно возможного направления js, и я заявляю новичку!

Спасибо за любую помощь

  • 0
    не уверен, но в вашем коде стиль будет применять прозрачность, когда элемент только активен и находится в фокусе. элемент, по которому щелкнули, будет по-прежнему «непрозрачным» после того, как пользователь удерживает нажатой элемент или зависает в элементе, можете ли вы перефразировать свой вопрос

1 ответ

0
Лучший ответ

Предполагая, что LI всегда будет соответствовать ahrefs с imgs, все, что вам нужно сделать, - это присоединить событие click к элементам списка, которые "на самом деле" соответствуют соответствующему img. Видеть

http://jsbin.com/bujayuku/1/

Когда вы нажимаете #n в списке, делайте материал в #n в div с большими пальцами.

  • 0
    Спасибо за ответ Спанка. Да, LI всегда соответствуют img hrefs, но я не могу заставить ваш код работать на меня. Ваш jsbin работает, как и ожидалось, но при поиске различий для диагностики проблемы, помещенной в мой код, я отмечаю, что вы удалили ссылки из моего списка. Я не вижу, что это должно иметь какое-либо значение для функциональности, но это единственное реальное отличие, которое я вижу. Ваш текст "... $ (this) .index (); // 1-й li = 0, 2-й li = 1 и т. Д. Indx ++; // сделано отдельно только для демонстрации ..." здесь). Код должен работать, но я в растерянности, почему он не ...
  • 0
    БЫСТРО, чтобы проверить - первоначально опубликованные вами CSS используют opacity, -moz-opacity и filter: alpha (opacity). Возможно, вы захотите обновить .dimmed, чтобы он был немного более ... властным :). Thumbs a .dimmed, .thumbs .dimmed, .dimmed {opacity: 0.5! Важный; -moz-opacity: 0,5! важно; фильтр: альфа (непрозрачность = 65)! важно; } Кроме того, вам, возможно, придется адаптировать jq для изменения / УДАЛЕНИЯ базовых CSS-свойств, предоставляемых сценарием при наведении / нажатии и т. Д. Если вы можете дать мне пример, опубликовать ссылку, напечатать мне что-нибудь, я с удовольствием возьму взгляд.
Показать ещё 2 комментария
Сообщество Overcoder
Наверх
Меню