При клике одни классы исчезали, а другие появлялись...
 

Имеется два изображения с некоторым кодом.

<a href="#" onclick="if (document.getElementsByClassName('Ru').style.display = 'none') { document.getElementsByClassName('Ru').style.display = ''; document.getElementsByClassName('En').style.display = 'none'; } else { document.getElementsByClassName('Ru').style.display = 'none'; }"><img src="a.png" alt="" /></a>

<a href="#" onclick="if (document.getElementsByClassName('En').style.display = 'none') { document.getElementsByClassName('Ru').style.display = 'none'; document.getElementsByClassName('En').style.display = ''; } else { document.getElementsByClassName('En').style.display = 'none'; }"><img src="b.png" alt="" /></a>

Имеется несколько слов.

<span class="Ru">АА</span>
<span class="Ru">АА</span>
<span class="En">ББ</span>
<span class="En">ББ</span>

Как сделать так, чтобы при нажатии на изображение "a" все классы "Ru" появлялись, а классы "En" исчезали, а при нажатии на изображение "b" все происходило наоборот.

Классы "Ru" само собой в начале невидны.

.Ru {display: none;}
.En {}

Думаю, максимально понятно объяснил. :D Перерыл кучу тем, ссылок с getElementsByClassName, но никак не могу подогнать их под себя. У меня это не работает... Opera 10.54 (21868).

Важно, чтобы это были именно классы. Так как слова разбросаны и надо както заставить все определенного класса исчезать и появляться одновременно... :( Что я делаю не так?

$('.classname').show(); // .hide() — скрыть

jQuery

Большое спасибо. :)