Элемент связи с текстом, фоном, поведением дисплея

Question

Итак, это меня немного озадачило. Я, наверное, просто смотрю на это с неправильной точки зрения, я не уверен. Во всяком случае, здесь идет:

У меня есть раздел навигации на сайте, и я хочу, чтобы у каждой кнопки (ссылки, определяющие содержимое iframe ниже) было одно фоновое изображение, когда оно «нормальное», одно, когда курсор находится над, и одно соответствующий ему контент отображается в iframe. Я предполагаю, что последний может потребовать некоторый Javascript, но я действительно не знаю (все это все еще относительно ново для меня). Я надеюсь, что, по крайней мере, кое-что из этого можно сделать обычным способом a:link, a:hover и т. Д.

Любое руководство будет с благодарностью.

Answer 1

Добавить класс к нему, когда на него щелкают и содержимое iframe изменяется следующим образом (javascript):

function changeIFrame(link) {
    document.getElementsByTagName('iframe')[0].src = link.href;
    link.className = 'activeFrame';
}

html:

<a href="nameOfUrl.html" onclick="changeIFrame(this); return false;">link text</a>

css:

.activeFrame { background-color: blue; }

Answer 2

Создайте новый класс CSS с именем «current» и примените этот класс к ссылке, на которой отображается соответствующий контент.Все остальные не применяют к нему «текущий».