Javascript/CSS -- 在点击无关元素时应用 css 样式

Question

Javascript 新手问题:我有一个在无序列表中使用 anchor 的 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;
}

此图库下方有缩略图，可引用列表中的 anchor 以单独选择图像:

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

拇指通过改变不透明度来响应选择，但我希望它们也响应于点击列表中的链接而改变，即点击 在

会导致 'detail_thumb.jpg' 变得不透明。

单击列表链接时是否有一个简单的 javascript 解决方案来应用 '.thumbs a:active/focus img' 类 ('

''

')？ Css 会更可取，但组合器显然不适用，因为图库和缩略图之间缺乏任何依赖关系(绝对定位的解决方案是不可取的)。

如果您觉得您可以回答这个问题，那么请提供您的解决方案的编码示例，因为我之前已经问过这个问题并且只收到关于可能的 js 方向的连续散文评论，而且我是一个明确的新手!

感谢您的帮助

Answer 1

假设 LI 总是将 ahrefs 与 imgs 相匹配，您所要做的就是将点击事件附加到列表项，该列表项“执行”匹配的 img。见

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

当您单击列表中的 #n 时，对拇指 div 中的 #n 执行操作。