Question

问候我已经尝试了好几个小时了，我很难弄清楚。我是javascript和jquery的新手。例如，我有两个图像，黑色和蓝色图像。我有4个黑色图像，当单独盘旋时，将img src更改为蓝色，并在悬停时返回黑色。我想要完成的是当你点击图像/链接时，它将保持“蓝色”。单击其他图像后，它将仅变为“黑色”。

这是我到目前为止所拥有的：
HTML

<a id="catlnk1" href="javascript:void(0);" onclick="loadCat(1)"><img src="/images/blogpage/published.png" onmouseover="this.src='/images/blogpage/published-active.png'" onmouseout="this.src='/images/blogpage/published.png'" alt="Published" />

脚本

function loadCat(num)
 { if (num == 1){
 $("#catlnk" + num).attr("src","/images/blogpage/published-active.png");
 } else if (num == 2){
 $("#catlnk" + num).attr("src","/images/blogpage/upcoming-active.png");
 } else if (num == 3){
 $("#catlnk" + num).attr("src","/images/blogpage/opening-active.png");
 } else if (num == 4){
 $("#catlnk" + num).attr("src","/images/blogpage/job-active.png");
 } 
}

对不起，如果代码很乱，我是新手。

Answer 1

将事件内联绑定是一个坏主意。将您的功能与设计分开，并使用javascript或jQuery绑定事件。

我正在使用名为HTML-5的{{1}}数据属性来保存要显示的图像。

所以HTML会是这样的。

<强> HTML

data-image

<强> JS

<a id="catlnk1" href="javascript:void(0);">
    <img data-image="published" src="/images/blogpage/published.png" alt="Published" />
</a>
<a id="catlnk2" href="javascript:void(0);">
    <img data-image="upcoming" src="/images/blogpage/upcoming.png" alt="Upcoming" />
</a>
<a id="catlnk3" href="javascript:void(0);">
    <img data-image="opening" src="/images/blogpage/opening.png" alt="Opening" />
</a>
<a id="catlnk4" href="javascript:void(0);">
    <img data-image="job" src="/images/blogpage/job.png" alt="Job" />
</a>

图像悬停和替换 - jquery

1 个答案:

的 Check Demo