如何用「當前頁面」中的javascript更改圖像的灰度？

Question

這個問題關注javascript在導航中的「current link」中使用javascript來指定圖像的灰度。

在下面的導航欄中，有四個正方形和相應的顏色。當懸停，焦點和活動時，它們的灰度應該會改變，而且當前頁面的灰度應該改變，我試圖用js灰色功能來做到這一點，以顯示我們在的哪個頁面。但在Java腳本代碼不工作，只在第一頁由JS代碼改變其灰度

var current = document.getElementById('default'); 
 

 
function graying(el) { 
 
    if (current != null) { 
 
    current.className = ""; 
 
    } 
 
    el.className = "graying"; 
 
    current = el; 
 
}

#nav { 
 
    width: 100px; 
 
    list-style: none; 
 
    margin: 100px auto; 
 
} 
 
#nav img:active, 
 
#nav img:focus, 
 
#nav img:hover { 
 
    filter: grayscale(0%); 
 
    -webkit-filter: grayscale(0%); 
 
    filter: gray; 
 
    -webkit-transition: all .5s ease; 
 
} 
 
#nav img.graying { 
 
    filter: grayscale(100%); 
 
    -webkit-filter: grayscale(100%); 
 
    filter: gray; 
 
    -webkit-transition: all .5s ease; 
 
}

<ul id="nav"> 
 
    <li> 
 
    <a href="blue.html"> 
 
     <img id="default" class="graying" onclick="graying(this);" src="images/red.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="green.html"> 
 
     <img onclick="graying(this);" src="images/green.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="red.html"> 
 
     <img onclick="graying(this);" src="images/blue.png"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="yellow.html"> 
 
     <img onclick="graying(this);" src="images/yellow.png"> 
 
    </a> 
 
    </li> 
 
</ul>

。在這種情況下使用「onclick」是否正確？

任何幫助表示讚賞。

Answer 1

您可以使用此代碼

img { 
 
    filter: gray; /* IE6-9 */ 
 
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ 
 
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ 
 
} 
 

 
/* Disable grayscale on hover */ 
 
img:hover { 
 
    filter: none; 
 
    -webkit-filter: grayscale(0); 
 
}

<img src="http://lorempixel.com/630/170/">