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

拇指通过改变不透明度来响应选择，但是我希望它们也会因为点击列表中的链接而改变，即点击＆lt; a href =＆＃34;＃two＆＃34; ＆GT; at＆lt; li id =＆＃34; one＆＃34;＆gt;会导致＆＃39; detail_thumb.jpg＆＃39;变得不透明。

是否有一个简单的JavaScript解决方案来应用＆＃39; .thumbs a：active / focus img＆＃39;单击列表链接时的课程（＆＃39;＆lt; li id =＆＃34;一个＆＃34;＆gt;＆lt; a href =＆＃34;＃two＆＃34;＆gt;＆lt; img src =＆＃34 ; ../图像/ intro.jpg＆＃34;＆GT;＆＃39;＆LT; / A＆GT;＆＃39;＆LT; /立GT;＆＃39）？ Css会更好，但是由于画廊和缩略图之间缺乏任何依赖性，组合器显然不适用（并且绝对定位的解决方案是不可取的）。

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

感谢您的帮助

Answer 1

假设LI的始终将使用imgs匹配ahrefs，您所要做的就是将click事件附加到匹配img的“做东西”的列表项。参见

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

当您单击列表中的#n时，请在Thumb div中对#n执行操作。

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

1 个答案: