Изменить стиль после нажатия на ссылку

Есть ссылка, внутри нее два span'а. Нужно при нажатии на ссылку поменять класс самой ссылки, а также поменять свойство display у span'ов. Или любым другим способом спрятать span1 и на его месте показать span2.

<a class="link-1" href="url" id="link-<? echo $id ?>">
<span style="display:inline" class="span1">Текст1</span>
<span style="display:none" class="span2">Текст2</span></a>

После клика на выходе нужно получить что-то вроде этого:

<a class="link-2" href="url" id="link-<? echo $id ?>">
<span style="display:none" class="span1">Текст1</span>
<span style="display:inline" class="span2">Текст2</span></a>

Сделал так:

<script type="text/javascript">
function linkclass(id){
    document.getElementById(id).className = 'link-2';
}
function spandisplay(){
    document.getElementByClassName('span1').style.display = 'none';
    document.getElementByClassName('span2').style.display = 'inline';
}</script>

Функция spandisplay не работает.

Погуглил еще, оказывается, вообще нет такого метода getElementByClassName...