Свяжите элемент с текстом, фоном, поведением дисплея

#javascript #css #hyperlink #background

#javascript #css — файл #гиперссылка #предыстория #css #фон

Вопрос:

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

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

Мы будем признательны за любые рекомендации.

Ответ №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; }
  

Ответ №2:

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