Javascript / CSS —在單擊無關元素時應用CSS樣式

Question

Javascript新手問題：我有一個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;
)

拇指通過更改不透明度來響應選擇，但是我希望它們也可以更改以響應單擊列表中的鏈接，即單擊<li id =“ one”>上的<a href="#two">導致“ detail_thumb.jpg”變得不透明。

單擊列表鏈接時，是否有一種簡單的JavaScript解決方案可應用'.thumbs a：active / focus img'類（'<li id =“ one”> <a href="#two"> <img src =“。 ./images/intro.jpg“>'</a>'</ li>'）？ 最好使用CSS，但是由於圖庫和縮略圖之間沒有任何依賴關系，因此組合器顯然不適用（並且絕對定位的解決方案是不可取的）。

如果您認為您可以回答這個問題，請提供您的解決方案的編碼示例，因為我之前曾問過這個問題，並且僅收到關於可能的js方向的連續散文評論，我是新手！

感謝您的協助

Answer 1

假定LI 總是要使ahref與img匹配，您要做的就是將click事件附加到對匹配的img“做事”的列表項。 看到

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

當您在列表中單擊#n時，請對thumb div中的#n進行操作。